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リクエストヘッダーのタイプ

推薦する

MySQL max_allowed_pa​​cket 設定

max_allowed_pa​​cket は、受け入れるパケットのサイズを設定するために使用される ...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

CSS テキスト装飾 text-decoration と text-emphasis の詳細な説明

CSS では、テキストは私たちが毎日扱う最も一般的なものの 1 つです。テキストの場合、テキストの装...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

postcss-pxtorem モバイル適応の実装

コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...

Vue 画像切り抜きコンポーネントのサンプルコード

例:ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいていますプラグインをイ...

Linuxで大きなファイルを素早くコピーする方法

データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

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

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...