Redux データ フローの簡単な表現は次のとおりです。

User interaction dispatches an action --> The reducer updates the state based on the action --> Subscribed components update the UI based on the new state.

次のアプリを考えてみましょう。

これは、redux ベースのアプリケーションのクリーンな例です。redux サイクル ( Counter )に接続されている単純なコンポーネントは 1 つだけです。内部には、 incrementとdecrementの 2 つのボタンがあります。すでにお察しのとおり、これらのボタンはカウンターの値を増減します。

それでは、Reduxをゼロから構築するために必要なオブジェクトと関数を考えてみましょう。

createStore

不変のオブジェクト ツリーであり、アプリケーションの状態を保持します。createStore(reducer, state, enhancer):およびを入力としてcreateStore受け入れreducer、オブジェクトを出力します。stateenhancerstore

• getState(): ストアの状態を取得する
• dispatch(action): reducernew を取得stateし、状態の変化を各リスナーに通知するために使用します。
• subscribe(listener): リスナーをstore

ヘルパー関数はcombineReducers、値が異なる縮小関数であるオブジェクトを、渡すことができる単一の縮小関数に変換します。createStore.これは、複数のレデューサーを 1 つに結合し、ボイラープレート コードの時間を節約する単なるユーティリティ関数です。その役割は、次のスニペットを置き換えることです。

export default function todoApp(state = {}, action) {
  return {
    filter: filter(state.filter, action),
    todos: todos(state.todos, action)
  }
}
with:
const todoApp = combineReducers({
  filter,
  todos
});

function combineReducers(obj) {  
  return (state = {}, action) => {
    const newState = {};
    for (let key in obj) {
      newState[key] = obj[key](state[key], action);
    }
    return newState;
  }
}
    
      

このconnect()関数は、React コンポーネントを Redux ストアに接続します。

• ストアから必要なデータの断片と、アクションをストアにディスパッチするために使用できる関数を、接続されたコンポーネントに提供します。
• 渡されたコンポーネント クラスは変更されません。代わりに、渡したコンポーネントをラップする新しい接続コンポーネント クラスを返します。

これにより、関数にラップされたネストされたコンポーネントで<Provider />Reduxを使用できるようになります。storeconnect()

• React-Redux アプリ内のすべての React コンポーネントを接続できるため、ほとんどのアプリケーションは<Provider>、アプリのコンポーネント ツリー全体を Provider 内に配置して、トップ レベルで をレンダリングします。
• それを実装するために、新しいコンテキスト APIを使用できます。したがって、プロバイダーは非常にシンプルになります。行う必要があるのは、その API を使用してストアを渡すことだけです。

結論

Redux をゼロから構築するために必要な基本的なオブジェクトと関数について説明しました。これがお役に立てば幸いです。

読んでくれてありがとう ：）