What is react-dva?

In react, dva is a data flow solution based on redux and redux-saga. In order to simplify the development experience, dva also has built-in react-router and fetch, so it can also be understood as a lightweight application framework.

• This method is suitable for all brands of computers.

dva introduction

dva official website address: https://dvajs.com/

dva is a single-page application framework launched by Ant Financial, which encapsulates redux, react-router, and redux-saga at the upper level. redux-saga is a middleware used to manage asynchronous operations of redux applications. redux-saga collects all asynchronous operation logic in one place for centralized processing by creating sagas. It can be used to replace redux-thunk middleware

• This means that the application logic will exist in two places

  (1) The reducer is responsible for processing the stage update of the action

  (2) The sagas is responsible for coordinating those complex or asynchronous operations.

• sagas are created through the generator function

• sagas can be regarded as a process running in the background. Sagas listens to the initiated action, and then decides what to do based on this action (for example: whether to initiate an asynchronous request, initiate other actions to the store, or call other sagas, etc.

• because Using the generator function, redux-saga allows you to write asynchronous code in a synchronous way

The React project introduces Dva

Introduction

• Project situation: nw.js react redux antd (client application)
• Goal: redux -> dva

Preparation

• First install dva (current version 2.4.1)
  npm install dva —save

• Refer to the official documentation, transform the project into dva mode, add or modify the entry What is react-dva? under srcindex.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’);

3. Then add the routing What is react-dva? in the same directory router.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>

Description: The App component is the container component of the entire page, including menu, header, and footer And some common parts, by switching the menu to match the corresponding route, thereby jumping to each sub-component page, so the routing configuration needs to be written in a nested form.
For more routing configuration, refer to the react-router official documentation.

Here, the simplest dva mode has been configured. As long as you set the model and reducer in the corresponding component and connect in the page, you can use dva to manage the state.

Problem Solved

After the configuration is completed, restart the project and check the page effect as follows:

It is found that the container part is successfully rendered, but the page corresponding to the sub-route (the default is Account ) was not rendered, and then I looked at the console and found that an error was reported.

1. First, there is such a warning message:

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

Found the same problem in the issure of dva, and changed it to The following format will do.

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

2. Then there is a warning about routing problems:

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

React-router 4.0 or above is no longer recommended to use nested routing like the following If

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

is found, just change it directly to the component nested form (note that / must be added to the path of the sub-routing).

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

After making the changes and trying again, these two warnings are gone. Continue to look at routing and rendering issues.

3. Logically speaking, the Account component will be displayed by default when entering the application (because IndexRoute is configured), and when the What is react-dva? is modified and the page is refreshed, the page directly reports an error, as follows:

From this, I guessed that there was a problem with the configuration of the page routing. I searched for relevant information (react-filling the pitfall of react-router error reporting after refreshing) and found that it turned out to be a problem using BrowserHistory in dva. , so just change BrowserHistory to HashHistory
.

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

Restart the project, try to switch routes, and find that everything is normal.

You can modify dva in the page later. The usage of model and reducer in dva is relatively simple. Just try it according to the document. I will not describe it one by one here. .

Summary

Summarize several problems encountered when introducing dva into the project.

• ##import createHistory from 'history/createHashHistory'; Warnings caused by writing

• Use

  createHashHistory The problem caused by page refresh failure.

• Problem with nested routing configuration.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What is react-dva?. For more information, please follow other related articles on the PHP Chinese website!