ReactとReduxの関係を詳しく説明

ドキュメント: Redux 中国語ドキュメント

公式の Redux ドキュメントでは、Redux を「予測可能な JavaScript アプリケーション状態管理コンテナー」と定義しています。

1. reduxとreactの関係

Redux は、React アプリケーションの状態管理を提供するだけでなく、他のフレームワークもサポートします。

React は DOM (UI ライブラリ) の抽象化レイヤーであり、Web アプリケーションの完全なソリューションではありません。したがって、データ処理やコンポーネント間の通信に関しては、React の方が複雑になります。

大規模で複雑なアプリケーションの場合、これら 2 つの側面が最も重要になります。そのため、React のみを使用して大規模なアプリケーションを作成することは困難です。

redux の利点:

アプリケーションのステータスを一元的に保存および管理する

コンポーネント通信の問題に対処するときは、コンポーネント間の階層関係を無視する

大規模で複雑なアプリケーションにおけるコンポーネント間の通信を簡素化

データフローが明確でバグを見つけやすい

2. Reactのマルチコンポーネント共有

すべてのコンポーネントの状態を抽出し、React コンポーネント ツリーに倣って集中型の状態ツリーを構築します。この状態ツリーは React コンポーネント ツリーと 1 対 1 で対応しており、React コンポーネント ツリーのステートフル モデリングに相当します。

├── 出典
   ├── store # reduxディレクトリ、一般的にはstoreと呼ばれる
   │ ├── index.js # ストアを定義してエクスポートします。リデューサーはインポートされます
   │ └── Reducer # リデューサー関数 ├── App.js # ルートコンポーネント、Father および Uncle コンポーネントをインポート

1. Reduxはコンポーネント階層を無視できる

2. コンポーネントシステムでは、reduxはサードパーティのグローバル「変数」です。

3. reduxの3つのコアコンセプト

コアコンセプト: store 、 action 、 reducer

1. 保存する

ストアは、アクションとリデューサーを統合した、Reduxのコアとなる倉庫であり、vuexのストアに似ています。

特徴：

• アプリケーションにはストアが1つだけあります
• アプリケーションの状態を維持し、状態を取得します: store.getState re.getState()
• ストアを作成するときは、リデューサーをパラメータとして受け取ります: const st store = createStore(reducer)
• ステータス更新を開始するときは、 action：store.dispatch(action)

'redux' から {createStore} をインポートします。
// ストアを作成する
const ストア = createStore(リデューサー)

2. アクション

actionは、次の 2 つのプロパティを持つ js オブジェクトです。

type : 属性を識別し、その値は文字列です。複数のタイプはアクションによって区切られます

payload : データ属性、オプション。このアクションによって運ばれるデータを示します

特徴：

• 何をすべきか説明してください
• JS オブジェクト。アクションの種類を区別するために type 属性が必要です。
• 機能に応じて、対応する機能を完了するために追加のデータを伝送できます。

const action1 = { タイプ: 'addN'、 ペイロード: 12 }
//ストア.ディスパッチ(アクション1)
 
const action2 = { タイプ: 'add'、 ペイロード: 1 }

3. リデューサー（純粋関数）

効果：

1. 初期化状態

2. ステータスを変更する

状態の変更: 渡された古い状態とアクションに基づいて新しい状態を返します。

初期状態 = 0
関数リデューサー(状態 = initState, アクション) {
  状態を返す
}

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。