究極のマネージャー: Redux II アクション + リデューサー

巻き戻し

前回の で、Redux を紹介しました.私たちは Redux とは何かを学び、ストアなどの Redux の重要な基礎のいくつかを明らかにし始めました.今日は、Actions と Reducer について話すことで、Redux の詳細に入ることが有益だと思いました.

Reduxって何？

簡単に要約すると、Redux は状態管理ライブラリです. Redux はアプリケーションの状態を取得し、それをアプリケーションの外にあるストアと呼ばれる単一の場所に移動します.そうすることで、アプリケーションのすべてのコンポーネントがいつでも状態にアクセスできるようになります.これは巨大です!

では、Actions + Reducer はどこから来るのでしょうか?

ストアはアプリケーションの状態を保持し、アプリケーションは常に変更および更新されているため、ストアには状態の変化を反映するように更新する方法が必要です.簡単に言うと、ストアはアクションとレデューサーによって更新されます.

行動

アクションは、キーと値のペアの構文のプロパティで構成されるプレーンな JS オブジェクトです.アクションには、状態の何が変更される可能性があるか、または状態が変更された理由に関する情報が含まれています.具体的には、アクションには、呼び出されるアクションのタイプを示す「type」プロパティが必要です.アクションには、変更に関する情報を含む「ペイロード」プロパティも必要です.以下は、アクションの例です.

{ 
  type: "ADD_CAT",
  payload: {
    name: "Cosmo",
    age: 3,
    weight: 45
  }
}

レデューサー

レデューサーは、最初の引数として状態を取り、2 番目の引数としてアクションを取り、新しい状態を返す関数です.レデューサーに関する興味深い機能には次のようなものがあります.(1) レデューサー関数は複数のアクションを処理できるため、switch-case 構文でコーディングされます.(2) レデューサーは純粋な関数です.

純粋関数は、同じ入力に対して常に同じ結果を返す関数です.純粋関数は副作用がないため使用します.これは、複雑なアプリケーションで重要です.

レデューサーの例を次に示します.

export default function addingCat(state, action) {
       switch(action.type) {
          case 'ADD_CAT': 
             return {payload: state.payload}
          default: 
             return state 
       }
}

したがって、状態を更新するには、次のことを行う必要があります.

アクションを作成します

レデューサー関数を作成します

アクションと状態をレデューサーに渡します

これにより、新しい状態が返されます.状態は不変 (変更できないことを意味する) であるため、更新された状態は完全に新しい状態であり、更新されたバージョンの以前の状態ではありません.

要約

Redux = 状態管理ライブラリ.

Redux はアプリケーションの状態をストアに保存します.

どのコンポーネントも、ストアを介して状態にアクセスできます.

ストアは JS オブジェクトです.

ストアは、アクションとリデューサーを使用して更新されます.

レデューサーは関数です.

アクションは JS オブジェクトです.

純粋な関数は、同じ入力に対して常に同じ結果を返します.

レデューサーは複数のアクションを処理できます.

レデューサーは新しい状態を返します.以前の状態を「更新」しません.

状態は不変です.

🌈 一緒に読んでくれて、私と一緒に学んでくれてありがとう!質問、興味をそそる、または私が学ぶのを助けるために、以下にコメントしてください. 🌈