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

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つのコアコンセプト

コアコンセプト: storeactionreducer

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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • ReactとReduxの配列処理の説明
  • 1 つの記事で React における Redux の初期の使用を理解する
  • react-reduxプラグインの詳細な紹介
  • React Redux 入門例
  • ReactとReduxの関係についての簡単な説明 react-redux

<<:  MySQLの外部結合と内部結合クエリの違い

>>:  コンテンツタイプの説明、つまりHTTPリクエストヘッダーのタイプ

推薦する

他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント

現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...

ニューススタイルのウェブサイトデザイン例25選

bmi ボイジャーピッチフォークアルスター食料品店チャウ真/斜めポスタこれは偽のDIYですクリエイテ...

一般的な HBase 運用および保守ツール 10 個の概要

概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...

NetEase ブログで使用されているシンプルな Web ページ コード

NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...

Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)

この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します

Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...