Redux-コアコンセプト

アプリケーションの状態が次のようなプレーンオブジェクトによって記述されていると仮定します。 initialState これは次のとおりです-

const initialState = {
   isLoading: false,
   items: [],
   hasError: false
};

アプリケーション内のすべてのコードでこの状態を変更することはできません。状態を変更するには、アクションをディスパッチする必要があります。

アクションとは何ですか?

アクションは、typeプロパティで変更を引き起こす意図を説明するプレーンオブジェクトです。実行されているアクションのタイプを示すtypeプロパティが必要です。アクションのコマンドは次のとおりです-

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information
}

アクションと状態は、Reducerと呼ばれる機能によってまとめられています。変更を引き起こすことを意図してアクションがディスパッチされます。この変更は、レデューサーによって実行されます。レデューサーはReduxの状態を変更する唯一の方法であり、より予測可能で、一元化され、デバッグ可能になります。'ITEMS_REQUEST'アクションを処理するレデューサー関数は次のとおりです-

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

Reduxには、アプリケーションの状態を保持する単一のストアがあります。データ処理ロジックに基づいてコードを分割する場合は、Reduxのストアではなくレデューサーの分割を開始する必要があります。

このチュートリアルの後半で、レデューサーを分割してストアと組み合わせる方法について説明します。

Reduxのコンポーネントは次のとおりです-