理解Redux - 他山之石

Redux の核心思想は、Web アプリケーションが状態マシンであり、ビューと状態が一対一の関係にあるということです。

最近 1 年間、私は React 関連の技術スタックを使用してきましたが、Redux の理解にも多大な努力を払ってきました。Redux に関するチュートリアルを書きたいと思っていましたが、ついに始めることができました。

Redux を使用する理由#

Redux は、JavaScript での複雑な状態管理を解決するために登場しました。アプリケーションが大規模になり、複雑なインタラクションシナリオを処理する必要がある場合、Redux を試してみることができます。React を使用している場合、多くのコンポーネントで状態を共有する必要がある場合、非同期処理を処理する必要がある場合、コンポーネントの状態の変更が他のコンポーネントを更新する必要がある場合、Redux が必要になる場合があります。

イントロダクション#

Redux は、予測可能な状態管理を提供する JavaScript の状態コンテナです。

Redux は状態管理に特化しており、React とは切り離されています。

Redux は、次の 3 つの基本原則で説明することができます：

単一の状態ツリー

アプリケーション全体の状態は、オブジェクトツリーに格納され、このオブジェクトツリーは唯一のストアに存在します。

状態は読み取り専用

状態を変更する唯一の方法は、アクションをトリガーすることです。アクションは、発生したイベントを記述するための普通のオブジェクトです。

変更を実行するために純粋な関数を使用する

アクションがどのように状態ツリーを変更するかを説明するために、リデューサーを記述する必要があります。

アクション#

アクションは、本質的には JavaScript の普通のオブジェクトです。Redux では、アクション内で実行するアクションを表すために、文字列型の type フィールドを使用することが規定されています。ほとんどの場合、type は文字列定数として定義されます。アプリケーションの規模が大きくなるにつれて、アクションを格納するために個別のモジュールやファイルを使用することをお勧めします。

Redux では、アクション作成関数の結果を dispatch () メソッドに渡すだけで、ディスパッチプロセスを開始できます。store 内では、store.dispatch () を使用して dispatch () メソッドを直接呼び出すことができます。

リデューサー#

リデューサーは、渡されたアクションと状態に基づいて新しい状態を計算します。

リデューサーは純粋な関数であり、古い状態とアクションを受け取り、新しい状態を返します。
同じパラメータを渡すと、次の状態が必ず同じになります。特別なケースや副作用はありません。API リクエストや変数の変更はありません。純粋な計算のみが実行されます。

リデューサーでは状態を変更せず、新しいオブジェクトを返すようにしてください。Object.assign () を使用して新しいコピーを作成することができます。次のようには使用しないでください：

Object.assign(state, { visibilityFilter: action.filter })

上記のコードは、最初のパラメータの値を変更します。最初のパラメータを空のオブジェクトに設定する必要があります。または、ES7 を有効にしてオブジェクトの展開演算子を使用し、{...state, ...newState} を使用して同じ結果を得ることもできます。
3. default の場合は、古い状態を返してください。未知のアクションに遭遇した場合、必ず古い状態を返す必要があります。

ストア#

ストアはアプリケーションの状態を維持し、アクションを発行するときにリデューサーを呼び出します。
ストアはそれらを結びつけるオブジェクトです。ストアには以下の責任があります：

アプリケーションの状態を維持すること；
getState () メソッドを提供して状態を取得すること；
dispatch (action) メソッドを提供して状態を更新すること；
subscribe (listener) を使用してリスナーを登録すること；
subscribe (listener) から返される関数を使用してリスナーを解除すること。

Redux アプリケーションには、単一のストアしかありません。データ処理ロジックを分割する必要がある場合は、複数のリデューサーを組み合わせる代わりに、複数のストアを作成するべきではありません。

データフロー#

Redux アプリケーションでのデータのライフサイクルは、次の 4 つのステップに従います：

store.dispatch (action) を呼び出します。

store.dispatch (action) は、コンポーネント、XHR コールバック、タイマーなど、どこからでも呼び出すことができます。

Redux ストアは、渡されたリデューサー関数を呼び出します。

ストアは、現在の状態ツリーとアクションをリデューサーに渡します。

ルートリデューサーは、複数のサブリデューサーの出力を 1 つの単一の状態ツリーにマージする必要があります。
Redux ストアは、ルートリデューサーが返す完全な状態ツリーを保存します。

まとめ#

この記事では、Redux の概念と基本的な紹介について説明しました。次回は、基本的な使い方について紹介します。