Dva 概念

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过dispatch发起一个action，如果是 同步行为会直接通过reducers 改变state，如果是异步行为（副作用）会先触发effects，然后流向reducers最终改变state，所以在dva中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。
PPrerEAKbIoDZYr.png

Models 介绍

State

State 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值）；操作的时候每次都要当做不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。

在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state 数据。

  1. const app = dva();
  2. console.log(app._store); // 顶部的 state 数据

Action

Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从UI事件、网络回调，还是 WebSocket 等数据源所获取的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。
action 必须带有 type 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 dispatch 

  1. import {connect} from 'dva';
  2. function App(props){
  3.   const action = {
  4.     type: 'loginModel/userInfo',    //action动作
  5.     payload: {},    //额外参数
  6.   }
  7.     return (<div onClick={() => props.dispatch(action}></div>)
  8. }
  9. export default connect(mapStateToProps)(App)
  11. // 在 dva 中，通过 connect(mapStateToProps, dispatchActionToProps, ...)(App) 连接组件和Model
  12. // 如果dispatchActionToProps不传值时，connect Model 的组件通过 props 可以访问到 dispatch，
  13. // 可以调用 Model 中的 Reducer 或者 Effects

dispatch 函数

type dispatch = (a: Action) => Action
它是一个用于触发 action 的函数，action是改变 Satate 的唯一途径，但是它只描述一个行为，而 dispatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。

Reducer

type Reducer<S, A> = (state: S, action: A) => S
Reducer 函数接受2个参数：旧state对象、派发的action，返回新的state对象。
Reducer 必须是纯函数，所以同样的输入必然得到同样的输出，它们不应该产生任何副作用。并且每一次的计算都应该使用 immutable data，这种特性简单理解就是每次操作都是返回一个全新的数据（独立，纯净），所以热重载和时间旅行这些功能才能够使用。

Effect

Effect 被称为副作用，常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变的不纯，同样的输入不一定获得同样的输出。

dva 为了控制副作用的操作，底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念，所以将异步转成同步写法，从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数，如果你想了解更多可以阅读Mostly adequate guide to FP，或者它的中文译本JS函数式编程指南。

Subscription

Subscription 是一种从 源 获取数据的方法，它来自于 elm。
Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

  1. import key from 'keymaster';
  2. ...
  3. app.model({
  4.   namespace: 'count',
  5.   subscriptions: {
  6.     // 键盘事件监听
  7.     keyEvent({dispatch}) {
  8.       key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
  9.     },
  10.     // 路由变化监听
  11.     setup({ dispatch, history }){
  12.       history.listen(location => {
  13.       });
  14.     }
  15.   }
  16. });

Router

这里的路由通常指的是前端路由，由于我们的应用现在通常是单页应用，所以需要前端代码来控制路由逻辑，通过浏览器提供的 History API 可以监听浏览器url的变化，从而控制路由相关操作。
dva 实例提供了 router 方法来控制路由，使用的是react-router。

  1. import { Router, Route } from 'dva/router';
  2. app.router(({history}) =>
  3.   <Router history={history}>
  4.     <Route path="/" component={HomePage} />
  5.   </Router>
  6. );

Route Components

在组件设计方法中，我们提到过 Container Components，在 dva 中我们通常将其约束为 Route Components，因为在 dva 中我们通常以页面维度来设计 Container Components。
所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）。

dva-cli（dva脚手架）

https://github.com/dvajs/dva-cli

  1. npm install -g dva-cli    # 全局安装dva-cli
  2. dva -v     # 查看dva版本号
  4. # 创建名字为demo的项目，包含项目初始化目录和文件，
  5. # 并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
  6. # 创建好后，默认打开 http://localhost:8000
  7. dva new demo

初始化项目（以“基本计数器”为例介绍dva）

  • history的最新版为5.0，而connect-react-router使用的history版本为4.7，不兼容
  • 不显式安装history或者指定老版本history进行安装。否则自己安装的history是使用history5
    1. npx create-react-app 8.dva
    2. cd 8.dva
    3. cnpm i -S dva redux react-redux redux-saga react-router-dom connected-react-router

reducers

rwe.gif

src/index.js

  1. import React from 'react';
  2. import dva from 'dva';
  3. import Counter1 from './components/Counter1.js';
  4. import Counter2 from './components/Counter2.js';
  6. // 创建dva实例
  7. const app = dva();
  9. // 定义全局model(可定义多个)
  10. app.model(require('./models/counter1').default);
  11. app.model(require('./models/counter2').default);
  13. // 定义路由规则
  14. // app.router 接收一个函数组件，回传参数是 {app, history}
  15. app.router(({app, history}) => {
  16.   console.log(app, history);
  17.   return (
  18.     <div>
  19.       <Counter1 />
  20.       <Counter2 />
  21.     </div>
  22.   )
  23. });
  25. // 启动
  26. app.start('#root');

src/models

src/models/counter1.js
  1. // dva 通过 model 的概念把一个领域的模型管理起来，类似于redux的仓库。
  2. // 包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
  4. export default {
  5.   namespace: 'counter1', //命名空间，表示在全局 state 上的 key
  6.   state: {  //初始值
  7.     number: 5,
  8.   },
  9.   // reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
  10.   reducers: { 
  11.     add(state, action){
  12.       return {...state, number: state.number+1};
  13.     }
  14.   }
  15. }

src/models/counter2.js
  1. export default {
  2.   namespace: 'counter2',
  3.   state: {
  4.     number: 10,
  5.   },
  6.   reducers: { 
  7.     add: (state, action) => ({...state, number: state.number+1}),
  8.   }
  9. }

src/components

src/components/Counter1.js
  1. // connect就是react-redux的connect，把model和component串联起来。
  2. import {connect} from 'dva';
  4. function Counter1(ps){
  5.   return (
  6.     <div>
  7.       <div>{ps.number}</div>
  8.       <div>
  9.         <button onClick={() => ps.dispatch({type: 'counter1/add'})}>同步+</button>
  10.       </div>
  11.     </div>
  12.   )
  13. }
  15. let mapStateToProps = state => state.counter1;
  16. export default connect(mapStateToProps)(Counter1);

src/components/Counter1.js
  1. import {connect} from 'dva';
  3. function Counter2(ps){
  4.   return (
  5.     <div>
  6.       <div>{ps.number}</div>
  7.       <div>
  8.         <button onClick={() => ps.dispatch({type: 'counter2/add'})}>同步+</button>
  9.       </div>
  10.     </div>
  11.   )
  12. }
  13. export default connect(({counter2}) => counter2)(Counter2);

effects

rwe.gif

src/models

src/models/delay.js
  1. // 模拟延迟
  2. export const delay = (ms=1000, val=true) => new Promise((resolve, reject) => {
  3.   setTimeout(resolve, ms, val);
  4. });
  5. // 模拟异步返回数据
  6. export const delayMock = (data, ms) => delay(ms, {
  7.   result: 1,
  8.   data,
  9. })

src/models/counter1.js
  1. import {delayMock} from './delay';
  3. // dva 通过 model 的概念把一个领域的模型管理起来，类似于redux的仓库。
  4. // 包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
  6. const counter1 = {
  7.   namespace: 'counter1', //命名空间，表示在全局 state 上的 key
  8.   state: {  //初始值
  9.     number: 5,
  10.   },
  11.   // 异步（副作用）
  12.   effects: {
  13.     *asyncAdd(action, {call, put}){
  14.       const data = yield call(delayMock, {id: 1, name: 'jack'});
  15.       console.log('data=>', data);
  16.       // 如果在effects里派发动作，如果是派发给自己的model的话，不需要加namespace前缀
  17.       yield put({type: 'add'});
  18.       // 如果派发给其它model，需要加前缀
  19.       yield put({type: 'counter2/add'});
  20.     }
  21.   },
  22.   // reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
  23.   reducers: { 
  24.     add(state, action){
  25.       return {...state, number: state.number+1};
  26.     }
  27.   }
  28. }
  29. export default counter1;

src/models/counter2.js
  1. import {delayMock} from './delay';
  3. const counter2 = {
  4.   namespace: 'counter2',
  5.   state: {
  6.     number: 10,
  7.   },
  8.   effects: {
  9.     *asyncAdd(action, {call, put}){
  10.       yield call(delayMock);
  11.       yield put({type: 'add'});
  12.     }
  13.   },
  14.   reducers: {
  15.     add: (state, action) => ({...state, number: state.number+1}),
  16.   }
  17. }
  18. export default counter2;

src/components

src/components/Counter1.js
  1. import {connect} from 'dva';
  3. function Counter1({dispatch, ...ps}){
  4.   return (
  5.     <div>
  6.       <div>{ps.number}</div>
  7.       <div>
  8.         <button onClick={() => dispatch({type: 'counter1/add'})}>同步+</button>
  9. +       <button onClick={() => dispatch({type: 'counter1/asyncAdd'})}>异步+</button>
  10.       </div>
  11.     </div>
  12.   )
  13. }
  15. let mapStateToProps = state => state.counter1;
  16. export default connect(mapStateToProps)(Counter1);

src/components/Counter1.js
  1. import {connect} from 'dva';
  3. function Counter2({dispatch, ...ps}){
  4.   return (
  5.     <div>
  6.       <div>{ps.number}</div>
  7.       <div>
  8.         <button onClick={() => dispatch({type: 'counter2/add'})}>同步+</button>
  9. +       <button onClick={() => dispatch({type: 'counter2/asyncAdd'})}>异步+</button>
  10.       </div>
  11.     </div>
  12.   )
  13. }
  15. export default connect(({counter2}) => counter2)(Counter2);

路由使用 dva/route

默认输出 react-router 接口， react-router-redux 的接口通过属性 routerRedux 输出。

src/index.js

  1. import React from 'react';
  2. import dva from 'dva';
  3. import history from './routes/history';
  4. import RouterConfig from './routes';
  6. // 创建dva实例
  7. const app = dva({
  8.   history,
  9. });
  11. // 定义全局model(可定义多个)
  12. app.model(require('./models/counter1').default);
  13. app.model(require('./models/counter2').default);
  15. // 定义路由规则
  16. // app.router 接收一个函数组件，回传参数是 {app, history}
  17. // app.router(require('./routes').default);
  18. app.router(RouterConfig);
  20. // 启动
  21. app.start('#root');

src/routes/history.js

  1. // import { createHashHistory } from 'history';
  2. import { createBrowserHistory } from 'history';
  4. const history = createBrowserHistory({
  5.   basename: '/web',    // 基链接
  6.   forceRefresh: false,    //是否强制刷新整个页面
  7.   // keyLength: 6,    //location.key的长度
  8.   // getUserConfirmation: (message,callback) => callback(window.confirm(message))     // 跳转拦截函数
  9. });
  11. export default history;

src/routes/index.js

  1. import React from "react";
  2. import {Router, Route, Switch, Link} from "dva/router";
  3. import Counter1 from '../components/Counter1.js';
  4. import Counter2 from '../components/Counter2.js';
  6. function RouterConfig({history, app}){
  7.   console.log(history, app);
  8.   return (
  9.     <div>
  10.       <Router history={history}>
  11.         <>
  12.           <ul>
  13.             <li><Link to="counter1">page counter1</Link></li>
  14.             <li><Link to="counter2">page counter2</Link></li>
  15.           </ul>
  16.           <Switch>
  17.             <Route path="/counter1" component={props => <Counter1 {...props} />} />
  18.             <Route path="/counter2" component={props => <Counter2 {...props} />} />
  19.           </Switch>
  20.         </>
  21.       </Router>
  22.     </div>
  23.   )
  24. }
  25. export default RouterConfig;

路径跳转

src/routes/index.js

  1. import React from "react";
  2. + import {Router, Route, Switch, Link, routerRedux} from "dva/router";
  3. import Counter1 from '../components/Counter1';
  4. import Counter2 from '../components/Counter2';
  5. + const {ConnectedRouter} = routerRedux;
  7. function RouterConfig({history, app}){
  8.   console.log(history, app);
  9.   return (
  10.     <div>
  11. +     <ConnectedRouter history={history}>
  12.         <>
  13.           <ul>
  14.             <li><Link to="counter1">page counter1</Link></li>
  15.             <li><Link to="counter2">page counter2</Link></li>
  16.           </ul>
  17.           <Switch>
  18.             <Route path="/counter1" component={props => <Counter1 {...props} />} />
  19.             <Route path="/counter2" component={props => <Counter2 {...props} />} />
  20.           </Switch>
  21.         </>
  22.  +    </ConnectedRouter>
  23.     </div>
  24.   )
  25. }
  26. export default RouterConfig;

src/models/counter1.js

  1. import {delayMock} from './delay';
  2. + import {routerRedux} from 'dva/router';
  4. const counter1 = {
  5.   namespace: 'counter1',
  6.   state: {
  7.     number: 5,
  8.   },
  9.   effects: {
  10.     *asyncAdd(action, {call, put}){
  11.       yield call(delayMock);
  12.       yield put({type: 'add'});
  13.     },
  14. +   *goto({payload}, {put}){
  15. +     yield put(routerRedux.push(payload));
  16. +   }
  17.   },
  18.   reducers: { 
  19.     add(state, action){
  20.       return {...state, number: state.number+1};
  21.     }
  22.   }
  23. }
  24. export default counter1;

src/components/Counter1.js

  1. import {connect} from 'dva';
  2. import { routerRedux } from 'dva/router';
  4. function Counter1({dispatch, ...ps}){
  5.   console.log('Counter1', ps);
  6.   return (
  7.     <div>
  8.       <div>{ps.number}</div>
  9.       <div>
  10.         <button onClick={() => dispatch({type: 'counter1/add'})}>同步+</button>
  11.         <button onClick={() => dispatch({type: 'counter1/asyncAdd'})}>异步+</button>
  12.         <button onClick={() => {
  13.           dispatch({type: 'counter1/goto', payload: '/counter2'})
  14.         }}>跳到/counter2</button>
  15.         <button onClick={() => {
  16.           dispatch(routerRedux.push('/counter2'))
  17.         }}>跳到/counter2</button>
  18.       </div>
  19.     </div>
  20.   )
  21. }
  23. let mapStateToProps = ({routing, counter1}) => ({
  24.   number: counter1.number,
  25. })
  26. export default connect(mapStateToProps)(Counter1);

dva/dynamic 按需加载model

  1. import dynamic from 'dva/dynamic';
  3. const UserPageComponent = dynamic({
  4.   app,    //dva 实例，加载 models 时需要
  5.   //返回 Promise 数组的函数，Promise 返回 dva model
  6.   models: () => [
  7.     import('./models/users'),
  8.   ],
  9.   //返回 Promise 的函数，Promise 返回 React Component
  10.   component: () => import('./routes/UserPage'),
  11. });

基础使用

src/index.js

  1. import dva from 'dva';
  2. import history from './routes/history';
  3. import RouterConfig from './routes';
  5. const app = dva({
  6.   history,
  7. });
  9. app.router(RouterConfig);
  10. app.start('#root');

src/routes/core.js

  1. import dynamic from 'dva/dynamic';
  3. /** 创建动态组件
  4.  * 
  5.  * @param {*} app   dva 实例，加载 models 时需要
  6.  * @param {*} models 该路由组件加载的model数组
  7.  * @param {*} component  动态路由组件  () => import('@/pages/Home')
  8.  * @returns 
  9.  */
  10. export const dynamicWrapper = (app, models, component) => dynamic({
  11.   app,
  12.   models: () => models,
  13.   component,
  14. });

src/routes/index.js

  1. import React from "react";
  2. import {Route, Switch, Link, routerRedux} from "dva/router";
  3. import {dynamicWrapper} from './core';
  4. const {ConnectedRouter} = routerRedux;
  6. // 创建一级路由
  7. const routesData = (app) => {
  8.   const Counter1 = dynamicWrapper(
  9.     app,
  10.     [import('../models/counter1'), import('../models/counter2')],
  11.     () => import('../components/Counter1'),
  12.   );
  13.   const Counter2 = dynamicWrapper(
  14.     app, 
  15.     [import('../models/counter2')],
  16.     () => import('../components/Counter2')
  17.   );
  19.   return (
  20.     <Switch>
  21.       <Route path="/counter1" component={Counter1} />
  22.       <Route path="/counter2" render={props => (
  23.         <Counter2 {...props} app={app} /> {/*传递app过去，用于创建二级路由时使用*/}
  24.       )}/>
  25.     </Switch>
  26.   )
  27. }
  29. function RouterConfig({history, app}){
  30.   return (
  31.     <div>
  32.       <ConnectedRouter history={history}>
  33.         <>
  34.           <ul>
  35.             <li><Link to="/counter1">counter1</Link></li>
  36.             <li><Link to="/counter2">counter2</Link></li>
  37.             <li><Link to="/counter2/movie">counter2/movie</Link></li>
  38.             <li><Link to="/counter2/music">counter2/music</Link></li>
  39.           </ul>
  40.           {routesData(app)}
  41.         </>
  42.       </ConnectedRouter>
  43.     </div>
  44.   )
  45. }
  46. export default RouterConfig;

src/models/movie.js

  1. const movie = {
  2.   namespace: 'movie',
  3.   state: {
  4.     movieName: '海上钢琴师',
  5.   },
  6. }
  7. export default movie;

src/components/Counter2/index.js

  1. import {connect} from 'dva';
  2. import {Route, Switch} from "dva/router";
  3. import {dynamicWrapper} from '../routes/core';
  5. // 创建二级路由
  6. const routesData = (app) => {
  7.   const Movie = dynamicWrapper(
  8.     app,
  9.     [import('../models/movie')],  //路由/counter2/movie 按需加载了 counter2 movie 2个model
  10.     () => import('./Movie'),
  11.   );
  12.   const Music = dynamicWrapper(
  13.     app, 
  14.     [], //路由/counter2/music 按需加载了 counter2 1个model
  15.     () => import('./Music')
  16.   );
  18.   return (
  19.     <Switch>
  20.       <Route path="/counter2/movie" component={Movie} />
  21.       <Route path="/counter2/music" component={Music}/>
  22.     </Switch>
  23.   )
  24. }
  26. function Counter2(ps){
  27.   return (
  28.     <div>
  29.       <div>{ps.number}</div>
  30.       <div>
  31.         <button onClick={() => ps.dispatch({type: 'counter2/add'})}>同步+</button>
  32.         <button onClick={() => ps.dispatch({type: 'counter2/asyncAdd'})}>异步+</button>
  33.       </div>
  34.       <div>
  35.         <h2>二级路由</h2>
  36.         <div>{routesData(ps.app)}</div>
  37.       </div>
  38.     </div>
  39.   )
  40. }
  42. export default connect(({counter2}) => counter2)(Counter2);

src/components/Counter2/Movie.js

  1. import {connect} from "dva";
  3. function App(ps){
  4.   console.log('movie=>', ps);
  5.   return <div>counter2/movie</div>
  6. }
  7. export default connect(({counter2, movie}) => ({counter2, movie}))(App);

src/componnets/Counter2/Music.js

  1. function Music(){
  2.   return <div>counter2/music</div>
  3. }
  4. export default Music;

路由配置简单封装

本例是不向下面组件传递 app，初始化的时候是一次性把所有路由创建好。
当然，你也可以把 app 向下传，在用到子路由的地方再创建子路由组。

src/routes/core.js

  1. import {Route, Switch, Redirect} from "dva/router";
  2. import dynamic from 'dva/dynamic';
  4. // 设置页面标题
  5. export function PageTitle({title, children}){
  6.   document.title = title;
  7.   return children;
  8. }
  10. /** 创建动态组件
  11.  * 
  12.  * @param {*} app   dva 实例，加载 models 时需要
  13.  * @param {*} models 该路由组件加载的model数组
  14.  * @param {*} component  动态路由组件  () => import('@/pages/Home')
  15.  * @returns 
  16.  */
  17. export const dynamicWrapper = (app, models, component) => dynamic({
  18.   app,
  19.   models: () => models,
  20.   component
  21. });
  23. // 路由映射表
  24. window.dva_router_pathMap = {};
  26. /** 创建 组路由
  27.  * 
  28.  * @param {*} app 
  29.  * @param {*} routesFn 返回一组路由配置的函数
  30.  * @param {*} isAddSwitch 是否添加 Switch 包裹
  31.  * @param {*} opt.disabledNotFound 是否禁止添加 404 重定向
  32.  */
  33. export const createRoutes = (app, routesFn, isAddSwitch, opt={}) => {
  34.   const RoutesComArr = routesFn(app).map(routeConfig => createRoute(app, (app) => routeConfig));
  36.   // 是否禁止添加 404 重定向
  37.   if (!opt.disabledNotFound){
  38.     RoutesComArr.push(<Redirect key={`/not-found_redirect`} to="/not-found" />);
  39.   }
  41.   if (!isAddSwitch) return <Switch>{RoutesComArr}</Switch>;
  42.   return RoutesComArr;
  43. };
  45. /** 创建单个路由
  46.  * 
  47.  * @param {*} app 
  48.  * @param {*} routeFn 返回一个路由配置的函数
  49.  */
  50. export const createRoute = (app, routeFn) => {
  51.   const routeConfig = routeFn(app);
  52.   const {component: Com, path, exact, indexRoute, title, ...extraProps} = routeConfig;
  54.   if (path && path !== '/'){
  55.     window.dva_router_pathMap[path] = { path, title, ...extraProps };
  56.   }
  58.   let baseTitle = '标题 - {title}';
  59.   let outputTitle = title ? baseTitle.replace(/{.*}/gi, title) : baseTitle.slice(0, -10);
  61.   let routeProps = Object.assign(
  62.     {
  63.       key: path || Math.random(4),
  64.       render: props => (
  65.         <PageTitle title={outputTitle}>
  66.           <Com extraProps={extraProps} {...props} />
  67.         </PageTitle>
  68.       ),
  69.     },
  70.     path && {path},
  71.     exact && {exact},
  72.   )
  74.   if (indexRoute) {
  75.     return [
  76.       <Redirect key={path + "_redirect"} exact from={path} to={indexRoute} />,
  77.       <Route {...routeProps} />
  78.     ];
  79.   }
  81.   return <Route {...routeProps} />;
  82. }

src/routes/index.js

  1. import React from "react";
  2. import {Link, Switch, routerRedux} from "dva/router";
  3. import {createRoutes} from './core';
  4. import * as routers from './export';
  6. // 创建函数-返回路由配置数组
  7. const routesFn = (app) => {
  8.   return Object.keys(routers).reduce((arr, item) => arr.concat(routers[item](app)), []);
  9. }
  11. const {ConnectedRouter} = routerRedux;
  12. function RouterConfig({history, app}){
  13.   return (
  14.     <div>
  15.       <ConnectedRouter history={history}>
  16.         <>
  17.           <ul>
  18.             <li><Link to="/counter1">counter1</Link></li>
  19.             <li><Link to="/counter2">counter2</Link></li>
  20.             <li><Link to="/counter2/movie">counter2/movie</Link></li>
  21.             <li><Link to="/counter2/music">counter2/music</Link></li>
  22.           </ul>
  23.           {createRoutes(app, routesFn, true)}
  24.         </>
  25.       </ConnectedRouter>
  26.     </div>
  27.   )
  28. }
  29. export default RouterConfig;

src/routes/export.js

  1. export {default as counter} from './counter';

src/routes/counter.js（一级路由）

  2. import {dynamicWrapper, createRoutes} from './core';
  3. import counter2Routes from '../components/Counter2/routes';
  5. const routesCounter = app => {
  6.   let result = [
  7.     // 页面：/counter1
  8.     {
  9.       path: '/counter1',
  10.       title: 'page counter1',
  11.       //如果项目里全都是懒加载路由，可以只传component、model, 生成动态组件可以在createRoute里做。
  12.       component: dynamicWrapper(
  13.         app,
  14.         [import('../models/counter1'), import('../models/counter2')],
  15.         () => import('../components/Counter1'),
  16.       ),
  17.     },
  18.     // 页面：/counter2
  19.     {
  20.       path: '/counter2',
  21.       indexRoute: '/counter2/movie',
  22.       title: 'page counter2',
  23.       component: dynamicWrapper(
  24.         app, 
  25.         [import('../models/counter2')],
  26.         () => import('../components/Counter2'),
  27.       ),
  28.       // 二级路由引用：方式1（单独一条一条生成路由）
  29.       // childRoutes: [
  30.       //   counter2Routes.movie(app),
  31.       //   counter2Routes.music(app),
  32.       // ],
  34.       // 二级路由引用：方式2（直接生成路由组）
  35.       childRoutes: createRoutes(app, counter2Routes, true),
  36.     },
  37.   ]
  38.   return result;
  39. }
  41. export default routesCounter;

src/components/Counter2/routes.js (二级路由)

  1. import { dynamicWrapper, createRoute } from "../../routes/core";
  3. // /counter2/movie
  4. const movie = (app) => ({
  5.   path: '/counter2/movie',
  6.   title: "page counter2-movie",
  7.   component: dynamicWrapper(
  8.     app,
  9.     [import("../../models/movie")],
  10.     () => import("./Movie")
  11.   ),
  12. });
  14. // /counter2/music
  15. const music = (app) => ({
  16.   path: '/counter2/music',
  17.   title: "page counter2-music",
  18.   component: dynamicWrapper(
  19.     app,
  20.     [],
  21.     () => import("./Music")
  22.   ),
  23. });
  25. // 二级路由引用：方式1（单独一条一条生成路由）
  26. // const routesCounter2 = {
  27. //   movie: (app) => createRoute(app, movie),
  28. //   music: (app) => createRoute(app, music),
  29. // }
  31. // 二级路由引用：方式2（直接生成路由组）
  32. const routesCounter2 = app => ([
  33.   movie(app),
  34.   music(app),
  35. ])
  37. export default routesCounter2;

src/components/Counter2/index.js

  1. import {connect} from 'dva';
  2. import {Switch} from "dva/router";
  4. function Counter2(ps){
  5.   console.log('Counter2=>', ps);
  6.   return (
  7.     <div>
  8.       <div>{ps.number}</div>
  9.       <div>
  10.         <button onClick={() => ps.dispatch({type: 'counter2/add'})}>同步+</button>
  11.         <button onClick={() => ps.dispatch({type: 'counter2/asyncAdd'})}>异步+</button>
  12.       </div>
  13.       <div>
  14.         <h2>二级路由</h2>
  15.         <div>
  16.           {/* 二级路由引用：方式1（单独一条一条生成路由） */}
  17.           {/* <Switch>{ps.extraProps.childRoutes}</Switch> */}
  19.           {/* 二级路由引用：方式2（直接生成路由组） */}
  20.           {ps.extraProps.childRoutes}
  21.         </div>
  22.       </div>
  23.     </div>
  24.   )
  25. }
  27. export default connect(({counter2}) => counter2)(Counter2);

dva-loading

路由未加载完成时，显示Loading组件

src/index.js

  1. import dva from 'dva';
  2. import history from './routes/history';
  3. import dynamic from "dva/dynamic";
  4. import createLoading from "dva-loading";
  5. import RouterConfig from './routes';
  7. // 创建dva实例
  8. const app = dva({
  9.   history,
  10.   // onError: error => message.error(error.message),
  11. });
  13. // 引用插件
  14. app.use(createLoading());
  16. function Loading(){
  17.   return <div style={{position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1000}}></div>
  18. }
  20. // -> loading 使用自定义loading组件
  21. dynamic.setDefaultLoadingComponent(() => <Loading />);
  23. // 定义根model(根model可应用于所有路由)(model可定义多个)
  24. // app.model(require('./models/counter1').default);
  25. // app.model(require('./models/counter2').default);
  27. // 定义路由规则
  28. // app.router 接收一个函数组件，回传参数是 {app, history}
  29. // app.router(require('./routes').default);
  30. app.router(RouterConfig);
  32. // 启动
  33. app.start('#root');

dva/fetch

异步请求库，输出 isomorphic-fetch 的接口。不和 dva 强绑定，可以选择任意的请求库。

  1. import fetch from 'dva/fetch';
  4. function checkStatus(response) {
  5.   if (response.status >= 200 && response.status < 300) {
  6.     return response;
  7.   }
  9.   const error = new Error(response.statusText);
  10.   error.response = response;
  11.   throw error;
  12. }
  13. // 格式化数据
  14. const parseJSON = response => response.json();
  16. export async  function get(url, params={}, onSuc, onErr, config={}) {
  17.   params.platform = 'pc';
  18.   let str = qsStringify(params, {prefix: '?'});
  19.   let allUrl = url + str;
  21.   return  await fetch(allUrl, {
  22.     credentials: 'include',  //fetch 默认不带 cookie   如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials参数设置成 “include” 值。
  23.     headers: getHeaders(config),
  24.   })
  25.     .then(checkStatus)
  26.     .then(parseJSON)
  27.     .then((res) => successNetwork(allUrl, res, onSuc, onErr, config))
  28.     .catch((res) => errorNetwork(allUrl, res, onErr));
  29. }
  31. export async function post(url, params={}, onSuc, onErr, config={}) {
  32.   params.platform = 'pc';
  33.   let formData = new FormData();
  35.   if (params){
  36.     for(let k in params){
  37.       formData.append(k, params[k]);
  38.     }
  39.   }
  41.   return await fetch(url, {
  42.     method : 'POST',
  43.     credentials: 'include',
  44.     headers: getHeaders(config),
  45.     body: config.isBodyJSONStringify ? JSON.stringify(params) : formData,
  46.   })
  47.     .then(checkStatus)
  48.     .then(parseJSON)
  49.     .then((res) => successNetwork(url, res, onSuc, onErr, config))
  50.     .catch((res) => errorNetwork(url, res, onErr));
  51. }

dva/saga

输出 redux-saga 的接口，主要用于用例的编写。（用例中需要用到 effects）