Redux

Reduxは、JavaScriptアプリケーション用の予測可能な状態コンテナです.

ステータスは読み取り専用で、動作のみがステータスを変更できます.

変更は、新しいワークベンチを作成する必要があります.

dispatch(action) -> reducer -> new state

リッド関数は純粋な関数でなければなりません.

Reduxのメリット

状態を予測可能にする.

メンテナンス

のデバッグに役立ちます.(記録actionとstate.log)

のテストを簡単に貼り付けます.

Store

stateは、管理されている唯一のリポジトリとして機能します.
Reduxアプリケーションのステータスが格納されるスペース.
createStoreメソッドを使用して減速機を接続します.
createStoreとともに、他のReduserの組み合わせをパラメータとしてstoreを作成できます.

const store = createStore(rootReducer);

Action

Actionは,その名の通り,どのような動作をとるべきかを定義するオブジェクトである.

{ type: "ADD_TO_CART", payload: request }

通常、次のような形で構成されます.
ここでtypeは必須フィールドとして指定する必要があり、その他は選択的に使用できます.
actionによってすべての変化を行うことで、私たちが作成したアプリケーションで何が起こっているのかを直感的に理解することができます.

Reducer

Reducerは,現在の状態と動作を利用して新しい状態を作成する純粋な関数である.
また,見られるコードはショッピングモールで見られるショッピングバスケットの追加動作に関するコードである.

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
    default:
      return state;
  }
}

通常は上記の形状からなる.

ReducerとImmutability(不変性)

Reducer関数を作成する際に注意しなければならないのは、Reduxのステータス更新を変更しないことです.
これはReduxの利点の1つであり、変更したstateをログに残すためには、欠かせない操作です.

Dispatch

Dispatchは動作を伝える方法です.
dispatchの伝達パラメータは動作オブジェクトである.
次にReducerを呼び出してstateの値を変更します.

Redux hooks

いろいろなフックがありますが、まずは2種類を知っておきましょう.

useSelector()

まず,ユーザセレクタ()は素子と状態を接続する役割を果たす.
構成部品では、ユーザセレクタの伝達パラメータはコールバック関数を受け入れ、コールバック関数の伝達パラメータはstate値を含む.

useDispatch()

useDispatch()は、動作オブジェクトをReducerに渡す方法です.
動作が発生した場所はクリックなどのイベントが発生した素子である可能性がある.