ドヴァdva は、redux と redux-saga をベースにしたデータ フロー ソリューションです。開発エクスペリエンスを簡素化するために、dva には react-router と fetch も組み込まれており、軽量アプリケーション フレームワークに変換できます。 dvaの使用 redux-toolkit に少し似たモデルを定義します。 redux の connect のように接続します。 起動する。 対応する指示を通じて対応するリデューサーを見つけてディスパッチします。 これはdvaの基本的な操作であり、比較的簡単に使用できます。 DVAの実装アイデア: 関数をカプセル化し、ストアを作成し、モデルを通じてリデューサーと状態を収集し、リデューサー内のメソッド名を変更します。 まず、モデルです。モデルが複数あるため、それらを収集する必要があります。 まず、namespace を通じて rducer 内のメソッド名を変更します。 それから保存します。 その後、プロバイダーを通じて注入することができます。 モデルのリデューサーを変換し、redux によって受け入れられたリデューサーを返します。この時点では、モデルの状態は変わりません。これは単なる初期状態です。コンポーネントが実際に受け入れるのは redux 内の状態です。 初期実装が完了しました。 非同期をサポート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 ロジックを個別に実行するようにする必要があります。 それがやり方です。 正常に動作できます。 ルーターの実装使用方法に違いはありません 使い方は似ています。非同期ロジックはエフェクトでのみ記述できることに注意してください。Reducer は同期的であり、ディスパッチを続行することはできません。 成し遂げる:connectd-react-router をベースにした connectd-react-router の使い方を覚えていますか? 最初のステップは、ルーター オブジェクトを作成することです。 2 番目のステップはミドルウェアを使用することです。 パラメータとして API を app._router に渡します。それでおしまい。 プッシュを送信すると、ルーティング ミドルウェアによってインターセプトされ、処理されて別のページにプッシュされます。 これで react dva 実装に関するこの記事は終了です。さらに関連性の高い react dva 実装コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: メタビューポートはiPhoneでウェブページをフルスクリーン表示コントロールします
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
Code Cloud を使用して Git コード ストレージ ウェアハウスを構築するhttps://...
JSONデータはHTMLページ上に表示されフォーマットされます1. 表示効果図説明:すべてのキー値は...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...
目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...
最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...
HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...
目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...
序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...
非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...
目次単一条件単一データフィルタリング単一条件複数データフィルタリング複数の条件付きデータフィルタリン...
背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...
目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...