反応dvaとは何ですか?

React では、dva は redux と redux-saga に基づいたデータ フロー ソリューションです。開発エクスペリエンスを簡素化するために、dva には組み込みのreact-router と fetch も備えているため、次のように理解することもできます。軽量なアプリケーション フレームワーク。

• #この方法は、すべてのブランドのコンピューターに適しています。

#dva の紹介dva 公式 Web サイトのアドレス: https://dvajs.com/

dva は、Ant Financial によって開始されたシングルページ アプリケーション フレームワークで、redux、react-router、redux-saga を上位レベルでカプセル化します。 redux-saga は、redux アプリケーションの非同期操作を管理するために使用されるミドルウェアです。redux-saga は、saga を作成することで、すべての非同期操作ロジックを 1 か所に集め、集中処理します。redux-thunk ミドルウェアの置き換えに使用できます

これは、アプリケーション ロジックが 2 つの場所に存在することを意味します

• (1) リデューサーはアクションのステージ更新の処理を担当します

  (2) サガは担当します

saga はジェネレーター関数を通じて作成されます
saga はバックグラウンドで実行されているプロセスとみなすことができます。 Saga は、開始されたアクションをリッスンし、このアクションに基づいて何を行うかを決定します (たとえば、非同期リクエストを開始するか、ストアに対する他のアクションを開始するか、他の saga を呼び出すかなど)。
ジェネレーター関数を使用すると、redux-saga を使用して同期的な方法で非同期コードを作成できるため

React プロジェクトでは Dva # が導入されています##はじめに

プロジェクトの状況: nw.js 反応 redux antd (クライアント アプリケーション)

目標: redux -> dva
• 準備

最初に dva をインストールします (現在のバージョン 2.4.1)

• npm install dva —save

  
  

  公式ドキュメントを参照して、プロジェクトを dva モードに変換し、src
index.js

• 下のエントリ ファイルを追加または変更します。

  import dva from ‘dva’;
  import createHistory from ‘history/createHashHistory’;
  
  //1.Initialize
  const app = dva({
  history: createHistory(),
  });
  
  //2.Plugins
  //app.use({});
  
  //3.Model
  //app.model(require(‘./models/app’).default);
  
  //4.Router
  app.router(require(‘./router’).default);
  
  //5.Start
  app.start(‘#root’);

次に、ルーティング ファイルを同じディレクトリに追加します

router.js

3. <pre class="brush:php;toolbar:false">import React from ‘react’; import { Router, Route, Switch } from ‘dva/router’; import App from ‘./containers/App’; import{ Account, Articles, Channels, Editor } from ‘./containers’; const { ArticleList } = Articles; const RouterConfig = (({ history }) =&gt; ( &lt;routerhistory&gt; &lt;switch&gt; &lt;route&gt; &lt;indexroute&gt;&lt;/indexroute&gt; &lt;route&gt;&lt;/route&gt; &lt;route&gt;&lt;/route&gt; &lt;route&gt;&lt;/route&gt; &lt;route&gt;&lt;/route&gt; &lt;/route&gt; &lt;/switch&gt; )); export default RouterConfig;&lt;/routerhistory&gt;</pre> 説明: App コンポーネントは、アプリケーション全体のコンテナ コンポーネントです。メニュー、ヘッダー、フッターなどのページといくつかの共通部分は、対応するルートに合わせてメニューを切り替えることで、各サブコンポーネントのページにジャンプするため、ルーティング構成をネストした形式で記述する必要があります。ルーティング設定の詳細については、react-router 公式ドキュメントを参照してください。

ここでは、最も単純な dva モードが設定されています。対応するコンポーネントにモデルとリデューサーを設定し、ページ内で接続する限り、次のことができます。 dva を使用して状態を管理します。

問題は解決しました

構成が完了したら、プロジェクトを再起動し、次のようにページの効果を確認します。 コンテナ部分は正常にレンダリングされていますが、サブルート(デフォルトは Account )に相当するページがレンダリングされていないことがわかり、コンソールを見るとエラーが報告されていることがわかりました。 .

1. まず、次のような警告メッセージがあります:

Warning: Please use `require(“history”).createHashHistory` instead of `require(“history/createHashHistory”)`. Support for the latter will be removed in the next major release.

dva の発行で同じ問題が見つかり、次の形式で対応できるように変更しました。

const createHistory = require(‘history’).createBrowserHistory;

2. 次に、ルーティングの問題に関する警告が表示されます:

Warning: You should not use <route> and <route> in the same route; <route> will be ignored</route></route></route>

React-router 4.0 以降では、次のようなネストされたルーティングの使用は推奨されません。 、コンポーネントのネストされた形式に直接変更するだけです (サブルーティングのパスに / を追加する必要があることに注意してください)。

<route>
	<route></route>
</route>

変更を加えて再試行すると、これら 2 つの警告は表示されなくなりました。引き続きルーティングとレンダリングの問題を調べます。

3. 論理的に言えば、アプリケーションに入るときに (IndexRoute が構成されているため) Account コンポーネントがデフォルトで表示され、ファイルが変更されてページが更新されると、ページは次のようにエラーを直接報告します。

このことから、ページルーティングの設定に問題があるのではないかと推測し、関連情報を探してみました(反応ルーターエラーレポートの落とし穴を埋めるための反応)リフレッシュ)、dva. で

BrowserHistory

を使用すると問題があることが判明したので、BrowserHistory を

HashHistory

に変更するだけです。

<app>
	<route></route>
</app>

プロジェクトを再起動し、ルートを切り替えてみると、すべてが正常であることがわかります。

dva は後からページ内で変更できます。dva でのモデルとリデューサーの使用法は比較的簡単です。ドキュメントに従って試してみてください。ここでは 1 つずつ説明しません. .
概要

dva をプロジェクトに導入する際に発生するいくつかの問題を要約します。

##import createHistory from 'history/createHashHistory';

書き込みによる警告

Use

createHashHistory
• ページの更新の失敗によって引き起こされる問題。
  ネストされたルーティング構成に問題があります。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上が反応dvaとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。