Was ist React-DVA?

In React ist DVA eine Datenflusslösung, die auf Redux und Redux-Saga basiert. Um die Entwicklungserfahrung zu vereinfachen, verfügt DVA auch über einen integrierten React-Router und Fetch, sodass es auch als leichtes Anwendungsframework verstanden werden kann .

• Diese Methode ist für alle Computermarken geeignet.

dva-Einführung

dva-offizielle Website-Adresse: https://dvajs.com/

dva ist ein von Ant Financial gestartetes einseitiges Anwendungsframework, das Redux, React-Router und Redux implementiert -saga-Oberpaket. Redux-Saga ist eine Middleware zum Verwalten asynchroner Vorgänge von Redux-Anwendungen. Redux-Saga sammelt die gesamte asynchrone Betriebslogik an einem Ort, indem es Sagen erstellt, und kann als Ersatz für Redux-Thunk-Middleware verwendet werden. Dies bedeutet, dass die Logik der Anwendung geändert wird existieren an zwei Orten

(1) Der Reduzierer ist für die Verarbeitung der Phasenaktualisierung der Aktion verantwortlich

• (2) Die Sagen sind für die Koordinierung dieser komplexen oder asynchronen Vorgänge verantwortlich

  Sagas werden durch die Generatorfunktion erstellt

• Sagen kann man sich als im Hintergrund ablaufende Prozesse vorstellen. Sagas überwacht die initiierte Aktion und entscheidet dann basierend auf dieser Aktion, was zu tun ist (z. B. ob eine asynchrone Anfrage initiiert, andere Aktionen an den Store initiiert oder andere Sagas aufgerufen werden sollen usw.

• Weil die Generatorfunktion ist verwendet, Redux-Saga Ermöglicht das synchrone Schreiben von asynchronem Code )

Ziel: redux –> Offizielle Dokumentation und Transformation des Projekts. Fügen Sie für den DVA-Modus die Eintragsdatei 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’);
unter src hinzu oder ändern Sie sie und fügen Sie dann die Routing-Datei hinzu router im selben Verzeichnis. js

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 }) => (
	<routerhistory>
		<switch>
			<route>
				<indexroute></indexroute>
				<route></route>
				<route></route>
				<route></route>
				<route></route>
			</route>
		</switch>
	
));

export default RouterConfig;</routerhistory>

Beschreibung: Die App-Komponente ist die Containerkomponente der gesamten Seite, einschließlich Menü, Kopfzeile, Fußzeile und einigen gemeinsamen Teilen Entsprechende Route, Sie können zu jeder Unterkomponentenseite springen, daher muss die Routing-Konfiguration in einer verschachtelten Form geschrieben werden. Weitere Routing-Konfigurationen finden Sie in der offiziellen Dokumentation des React-Routers Der einfachste DVA-Modus wurde einfach in der entsprechenden Komponente konfiguriert. Sie können DVA verwenden, um den Status „Problem gelöst“ zu verwalten. Starten Sie das Projekt neu Überprüfen Sie den Seiteneffekt wie folgt: Es wurde festgestellt, dass der Container teilweise erfolgreich gerendert wurde, aber die der Unterroute entsprechende Seite (standardmäßig) wurde nicht gerendert. Schauen Sie sich dann die Konsole an und finden Sie einen Fehler

1 Ist diese Warnmeldung:

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

Habe das gleiche Problem in der Ausgabe von dva gefunden, folge einfach den Anweisungen und ändere es in das folgende Format:

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

React-router 4.0 und oben wird nicht mehr empfohlen, verschachteltes Routing wie unten gezeigt zu verwenden

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

Ändern Sie entsprechend direkt die Form der Komponentenverschachtelung (beachten Sie, dass der Pfad des Unterroutings einfach / hinzufügen muss).

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

Nachdem Sie die Änderungen vorgenommen und es erneut versucht haben, verschwinden diese beiden Warnungen. Schauen Sie sich weiterhin Routing- und Rendering-Probleme an.

3. Logischerweise wird die Kontokomponente beim Aufrufen der Anwendung standardmäßig angezeigt (da IndexRoute konfiguriert ist), und wenn die Datei geändert und die Seite aktualisiert wird, meldet die Seite direkt einen Fehler wie folgt:

Ich schätze, da stimmt etwas nicht Bei der Konfiguration des Seitenroutings und der Suche nach relevanten Informationen (React-Filling-Fallstricke, React-Router-Fehlermeldung nach der Aktualisierung) stellte sich heraus, dass es sich bei der Verwendung von BrowserHistory in DVA um ein Problem handelte. Ändern Sie also einfach BrowserHistory in HashHistory
• .

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

  
  Das Projekt neu gestartet, versucht, die Route zu wechseln, und festgestellt, dass alles normal ist. npm install dva —save

• 参考官方文档，改造项目为 dva 模式，在 src 下新增或修改入口文件 index.js

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

3. 然后在同级目录下添加路由文件 router.js

rrreee

说明：App 组件是整个页面的容器组件，包含了 menu、header、footer 和一些公用部分，通过切换菜单匹配对应路由，从而跳转到各个子组件页面，所以路由配置需要写成嵌套形式。
更多路由配置，参考 react-router 官方文档。

到这里，一个最简单的 dva 模式已经配置好了，只要在对应组件里面设置 model、reducer 并在页面中 connect ，就可以使用 dva 来管理状态了。

问题解决

配置完成后重新启动一下项目，查看页面效果如下：

发现容器部分渲染成功，但是子路由对应的页面（默认是 Account）并没有渲染，再看控制台发现报错了。

1、首先是这样一个警告信息：

rrreee

在 dva 的 issure 里面查找到相同的问题，按照提示改成下面的格式就可以了。

rrreee

2、然后是一个路由问题的警告：

rrreee

React-router 4.0 以上版本已经不建议像下面这样使用嵌套路由了

rrreee

对应的，直接改成组件嵌套的形式（注意子路由的 path 要加上 /）就可以了。

rrreee

改完之后然后重新，这两个警告就没有了。继续看路由和渲染的问题。

3、按理来说，进入应用默认会显示 Account 组件（因为配置了 IndexRoute），而且当修改文件刷新页面时候，页面直接报错了，如下：

由此猜想是页面路由的配置出了问题，查找了相关的资料（React填坑之react-router刷新后报错解决方法），发现原来是 dva 中使用 BrowserHistory 的问题，所以直接把 BrowserHistory 改成 HashHistory
就可以了。

rrreee

重新启动项目，尝试切换路由，发现一切正常了。

后面就可以在页面中进行 dva 的改造了，dva 中 model 、reducer 的用法都比较简单，根据文档进行尝试就可以了，这里便不一一叙述了。

总结

总结一下项目引入 dva 遇到的几个问题。

• import createHistory from ‘history/createHashHistory’; 写法带来 的警告

• 使用 createHashHistory

Sie können ihm folgen Später wurde die DVA auf der Seite geändert. Die Verwendung von Modell und Reduzierer in DVA ist relativ einfach. Ich werde sie hier nicht einzeln beschreiben.

• Zusammenfassung

  Fassen Sie mehrere Probleme zusammen, die bei der Einführung von dva in das Projekt aufgetreten sind.

  🎜🎜🎜import createHistory from ‚history/createHashHistory‘; Die Schreibmethode bringt eine Warnung mit sich. 🎜🎜🎜🎜Die Verwendung von createHashHistory verursacht das Problem eines Seitenaktualisierungsfehlers. 🎜🎜🎜🎜Probleme mit verschachtelter Routing-Konfiguration. 🎜

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas ist React-DVA?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!