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 を応援していただければ幸いです。