React dva実装コード

React dva実装コード

ドヴァ

dva は、redux と redux-saga をベースにしたデータ フロー ソリューションです。開発エクスペリエンスを簡素化するために、dva には react-router と fetch も組み込まれており、軽量アプリケーション フレームワークに変換できます。

ここに画像の説明を挿入

dvaの使用

ここに画像の説明を挿入

redux-toolkit に少し似たモデルを定義します。
接続を使用する

ここに画像の説明を挿入
ここに画像の説明を挿入

redux の connect のように接続します。

ここに画像の説明を挿入

起動する。
次に、アクションをどのようにディスパッチするかです。

ここに画像の説明を挿入

対応する指示を通じて対応するリデューサーを見つけてディスパッチします。

ここに画像の説明を挿入

これはdvaの基本的な操作であり、比較的簡単に使用できます。

DVAの実装

アイデア: 関数をカプセル化し、ストアを作成し、モデルを通じてリデューサーと状態を収集し、リデューサー内のメソッド名を変更します。

ここに画像の説明を挿入

まず、モデルです。モデルが複数あるため、それらを収集する必要があります。

ここに画像の説明を挿入

まず、namespace を通じて rducer 内のメソッド名を変更します。

ここに画像の説明を挿入

それから保存します。

ここに画像の説明を挿入
ここに画像の説明を挿入

その後、プロバイダーを通じて注入することができます。

ここに画像の説明を挿入

モデルのリデューサーを変換し、redux によって受け入れられたリデューサーを返します。この時点では、モデルの状態は変わりません。これは単なる初期状態です。コンポーネントが実際に受け入れるのは redux 内の状態です。
この getReducer は、実際のリデューサーを返すために 1 回だけ呼び出されます。

ここに画像の説明を挿入

初期実装が完了しました。

非同期をサポート

Dva は redux-saga と統合されているため、使用方法は同様です。

ここに画像の説明を挿入

モデルを作成するときに、エフェクトを通じてサガ ミドルウェアを作成できます。次に対応するアクションをディスパッチします

ここに画像の説明を挿入
ここに画像の説明を挿入

成し遂げる

アイデア: 各モデルのエフェクトを処理し、対応する saga 関数に変換し、takeEvery を使用して各属性名 (asyncADD など、takeEvery('asyncADD', ()=>{}) に変換) をリッスンし、redux-saga が提供する createSagaMiddleware を通じてミドルウェアを作成し、run メソッドを使用して各モデルのエフェクトから変換された saga 関数を実行します。
コード:

ここに画像の説明を挿入

getSagas を使用して各モデルの効果を変換し、配列に保存してから、forEach を通じて 1 つずつ実行します。
変換方法を見る

ここに画像の説明を挿入

図に示すように、各モデルのエフェクトは getSaga で function*(){} に変換され、その後、単一のモデルのエフェクトがトラバースされ、各属性は *asyncADD(){} によって処理されることがわかります。 getWatcher を通じて saga 関数が返され、fork を通じて子プロセスが開始されるため、メインプロセスの動作に干渉することはありません。

ここに画像の説明を挿入

各 getWatcher は、takeEvery を通じて現在の属性 (キー) を監視し、後続の効果を実行する saga 関数 (ジェネレーター関数) を返します。ここで、redux-saga の Put メソッドを変更して、prefixType ロジックを個別に実行するようにする必要があります。
基本的にはこれで完了です。各モデルのエフェクトは saga 関数で処理されて実行され、エフェクトの各メソッドはキーに変換されて takeEvery を通じてリッスンされます。ここでもエフェクトの各メソッド名にプレフィックスを追加する必要があります

ここに画像の説明を挿入

それがやり方です。

ここに画像の説明を挿入

正常に動作できます。

ルーターの実装

ここに画像の説明を挿入
ここに画像の説明を挿入

使用方法に違いはありません
dva は connected-react-router を継承します

ここに画像の説明を挿入
ここに画像の説明を挿入

使い方は似ています。非同期ロジックはエフェクトでのみ記述できることに注意してください。Reducer は同期的であり、ディスパッチを続行することはできません。

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

成し遂げる:

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

connectd-react-router をベースにした

ここに画像の説明を挿入

connectd-react-router の使い方を覚えていますか? 最初のステップは、ルーター オブジェクトを作成することです。

ここに画像の説明を挿入

2 番目のステップはミドルウェアを使用することです。

ここに画像の説明を挿入

パラメータとして API を app._router に渡します。それでおしまい。

ここに画像の説明を挿入

プッシュを送信すると、ルーティング ミドルウェアによってインターセプトされ、処理されて別のページにプッシュされます。

これで react dva 実装に関するこの記事は終了です。さらに関連性の高い react dva 実装コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  CSS3 すりガラス効果

>>:  メタビューポートはiPhoneでウェブページをフルスクリーン表示コントロールします

推薦する

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

Docker+Jenkinsによる自動デプロイの実現方法

Code Cloud を使用して Git コード ストレージ ウェアハウスを構築するhttps://...

HTML ページで JSON データを表示およびフォーマットする方法

JSONデータはHTMLページ上に表示されフォーマットされます1. 表示効果図説明:すべてのキー値は...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

HTTP ヘッダー情報の解釈と分析 (詳細概要)

HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...

...

よく使われるn番目の子セレクターをまとめる

序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

目次単一条件単一データフィルタリング単一条件複数データフィルタリング複数の条件付きデータフィルタリン...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...