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関数は、常に同じ結果値を返さなければなりません.