background

The React project that we are working on now is a long-standing project. Redux The experience of writing code is not very good, so I want to upgrade the introduction of dva. DVA used to be used dva-cli Generate dva projects directly, or use ant design pro When using umi to generate react + antd + dva project directly, it saves a lot of configuration cost. But these cases are introduced directly in the early stage of the project, and for existing react projects, how should we introduce them if we want to upgrade to dva? What problems will be encountered in the process of introducing dva? It took half a day to upgrade to dva. Here is a summary of the problems encountered in the upgrade process.

introduce

• Project status: nw.js + react + redux + antd (client application)
• Goal: Redux - > DVA

Get ready

1. First install dva (current version 2.4.1)
   npm install dva —save

2. Referring to official documents, the project is transformed into dva mode, adding or modifying the entry file index.js under src

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');

1. Then add the routing file router.js in the same directory

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={history}>
        <Switch>
            <Route path='/' component={App}>
                <IndexRoute component={Account} />
                <Route path='account' component={Account} exact />
                <Route path='articles' component={ArticleList
 exact />
                <Route path='channels' component={Channels} exact />
                <Route path='editor' component={Editor} exact />
            </Route>
        </Switch>
    </Router>
));

export default RouterConfig;

Description: App component is the container component of the whole page, including menu, header, footer and some common parts. It matches the corresponding routing by switching menu, and then jumps to each sub-component page, so the routing configuration needs to be written in nested form.
More Routing Configuration, Reference react-router official document.

At this point, a simplest dva mode has been configured. As long as the model, reducer are set in the corresponding components and connect ed in the page, the dva can be used to manage the state.

Problem solving

Restart the project after the configuration is completed. View the page as follows:

It was found that the container part was rendered successfully, but the page corresponding to the subrouting (default is Account) was not rendered. Looking at the console, it was found that the error was reported.

1. The first is 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.

In dva issure Find the same problem in it and change the format to the following according to the prompt.

const createHistory = require('history').createBrowserHistory;

1. Then there's a warning about routing problems:

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

Nested routing is no longer recommended in React-router versions 4.0 or above as follows

<Route path='/' component={App} >
    <Route path='account' component={Account} />
</Route>

Correspondingly, it's OK to change directly to the form of component nesting (note that the path of subrouting should be added/).

<App>
    <Route path='/account'component={Account} />
</App>

After that, and then again, the two warnings are gone. Keep looking at routing and rendering.

1. By default, entering the application displays the Account component (because it is configured). IndexRoute Moreover, when modifying the file to refresh the page, the page directly reported an error, as follows:
   

It is assumed that there is a problem in the configuration of page routing and relevant information is found.( React Filling Reactor-Router Refresh Error Reporting Solution We found that it was the problem of using Browser History in dva, so we changed Browser History to Hash History directly.
That's all right.

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

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

After that, we can make the modification of dva in the page. The usage of model and reducer in dva is relatively simple. We can try it according to the document. Here we will not describe them one by one.

summary

Summarize several problems encountered in introducing dva into the project.

1. import createHistory from 'history/createHashHistory'; warnings from writing
2. The problem of page refresh failure caused by using createHashHistory.
3. Nested routing configuration problem.

Reference material

1. Project of building dva mode based on official scaffolding of create-react-app (1)
2. React-Router Chinese Documents
3. DvaJS document