Reduxの定理

2106 ワード
テキストリンク

Redux


冗長性は反応器で最もよく使われる状態管理ライブラリです.Reactではstateが構成部品で管理され、サブ構成部品間でデータを交換する際に親構成部品で交換される.
このとき,子供が多くなると状態管理が非常に複雑になる.
管理状態の上位要素から引き続き取得する必要があり、Props drillingホットスポットが表示されます.

Redux基本用語



アクション


状態に変化が必要な場合は、動作が発生します.動作はオブジェクトとして表現され、typeフィールドが必要です.
{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '운동하기'
   }
}

アクション作成

  • 動作生成関数は、動作を作成する関数であり、矢印関数として作成することもできる.
  • コンポーネントをより容易に動作させるために作成および使用され、exportキーワードを使用して他のファイルからロードおよび使用されます.(必須ではない)
    • function addTodo(data) {
 return {
   type: 'ADD_TODO',
   data,
 }
}

    Reducer


    変化を引き起こす関数として、現在の状態、伝達された動作を参照して新しい状態を作成し、返します.
    const reducer = (state = INITAIL_STATE, action) => {
  switch (action.type) {
    case ADD_TODO: {
      return {
        ...state,
        todos: state.todos.concat({
          id: action.payload.id,
          text: action.payload.text,
          isCompleted: false,
        }),
      };
    }

    ストア


    各アプリケーションは、現在のステータスとリダイレクトを含むスナップショットを作成します.

    派遣する


    ショップの内蔵関数の1つとして、アクションをトリガーします.呼び出すと、ショップはリカバリプログラム関数を実行し、新しい状態にします.

    購読(購読)


  • ショップには関数の1つが内蔵されており、関数形式の値をパラメータとして使用します.Dispatchが動作するたびに、渡された関数が呼び出されます.

  • この関数を使用する必要はあまりありません.react-redixライブラリで提供されるconnet関数またはユーザーセレクタhookを使用して、ショップステータスを購読します.

    • Reduxの3つのルール


    1. Single source of truth

  • は、1つのアプリケーションで1つのストアのみを作成します.

    • 2. State is read-only

  • 反応器では、setStateを使用して状態を更新することができる.
  • リドスが新しいステータスを作成して更新するように操作する場合は、開発者ツールを使用して後方および前方に回転できます.(一言でタイムトラベル!)

    • 3. Changes are made with pure functions


    変化を引き起こす関数ree Duserは純粋な関数でなければならない.
  • リデューセ関数は、以前の状態と液体オブジェクトをパラメータとして受け入れた.
  • 以前の状態に触れずに、変化を引き起こす新しい状態オブジェクトを作成して返します.
  • と同じパラメータを呼び出すreducer関数は、常に同じ結果値を返さなければなりません.
    • 動的エージェントインスタンス
    Jestテストコードを作成するときに発生する問題!-localStorage