を 理解し、 そして Redux Store Actions Reducers React

Redux を利用したアプリケーションでは、アーキテクチャは Redux store、 actions 、および の3 つの主要な概念を中心に展開します reducers。 これらの各概念をさらに詳しく調べて、それらがどのように連携するかを見てみましょう。

Redux Store

Redux は、 store アプリケーションの完全な状態を保持する唯一の信頼できる情報源です。 これは本質的に、アプリケーションの状態全体を表すデータを含む JavaScript オブジェクトです。 Redux ライブラリの関数を store 使用して 作成します。 createStore

Actions

Actions は、アプリケーション内で起こったことを記述するプレーンな JavaScript オブジェクトです。 これらには、 type 実行されているアクションのタイプを示すフィールドが含まれており、追加のデータも含めることができます。 Actions アクション クリエーターを使用して作成されます。アクション クリエーターは、アクション オブジェクトを返す関数です。 例えば：

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers に応じてアプリケーションの状態がどのように変化するかを指定します actions。 リデューサーは、現在の状態とアクションを引数として受け取り、新しい状態を返す純粋な関数です。 Reducers 関数を使用して単一のルート リデューサーに結合されます combineReducers。 簡単な例を次に示します。

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

一緒に働いている

関数を使用してアクションをディスパッチすると dispatch 、Redux はそのアクションをすべての に転送します reducers。 各リデューサーは、アクションのタイプがそれ自体のタイプと一致するかどうかを確認し、それに応じて状態の関連部分を更新します。 更新された状態は Redux に保存され store 、接続されているコンポーネントは新しい状態に基づいて再レンダリングされます。

シナリオ例

ToDo リスト アプリケーションを想像してください。 ADD_TODO ユーザーが新しい todo を追加すると、 todo の タイプとテキストをペイロードとしてアクションがディスパッチされます。 todos リデューサはこのアクションを受け取り、新しい todo を状態に追加し、更新された状態を返します。

結論

Redux store、 actions 、および がどのように reducers 相互作用するかを理解することは、効果的な状態管理にとって重要です。 このアーキテクチャにより、懸念事項が明確に分離され、複雑なアプリケーションの状態の管理が容易になります。 Redux を使用して開発を続けると、これらの概念が状態管理戦略の基礎を形成します。