42日目TIL

開始します。

今日、私たちは別のリポジトリを作成し、ステータスに関するデータベースReduxを学び、昨日実装されたショッピングサイトのページを実装し、Reduxを使用してデータの印刷を管理しました.

Redux

定義＃テイギ＃
Reactは一方向データストリームに従うため、同じデータを使用するコンポーネントがある場合は、最上位コンポーネントからPropsにデータを渡すことでWebページを実現する必要があります.複雑なページは複数のコンポーネントを介してデータを転送するため、Propsの数を増やすことができ、管理が困難になる可能性があります.これらの問題を解決するためのライブラリはReduxです.ReduxはReactで使用できますが、Reactではなく他の環境で使用できます.

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

{ type: ‘ADD_TO_CART’, payload: request }

通常、typeを必須として指定し、次のシェイプを選択する必要があります.actionによってすべての変化を行うことで、私たちが作成したアプリケーションで何が起こっているのかを直感的に理解することができます.
Dispatch
Dispatchは動作を伝達する方法であり,動作オブジェクトはdispatchの伝達パラメータとして伝達され,Reducerを呼び出すことで状態値を変更する.
Store

const store = createStore(rootReducer);

Storeはステータス管理の唯一のリポジトリです.createStoreメソッドを使用して減速機を接続し、createStoreと他のリプレイの組み合わせをパラメータとしてショップを作成できます.
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はactionを受信しtypeに従ってStateを更新する責任を負う.Reducer関数を作成するときは、ステータス更新を変更しないでください.上記の例に示すように、Object.assignメソッドを使用するか、Spread Syntaxを使用して返信すればよい.

の最後の部分

以前は大量のPropsを素子に渡す必要があり、UserStateを用いて必要なStateを生成する必要があったが、Reduxを用いてサブ素子にデータを渡す必要がなく、一度にすべてのデータを管理し、Reducerを統合して更新することができるので、確かに便利である.基本的な使い方に加えて、createStoreの2番目、3番目のパラメータなどの他の内容を学び、使用します.