Redux-コアコンセプト

私たちのアプリケーションの状態は、次のような initialState と呼ばれるプレーンなオブジェクトによって記述されていると仮定しましょう-

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

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

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

アクションは、タイププロパティで変更を引き起こす意図を記述する単純なオブジェクトです。どのタイプのアクションが実行されているかを伝える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コンポーネントは次のとおりです-

データ処理ロジック

Redux-core-concepts

Redux-コアコンセプト

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