介绍

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

特性

• 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
• elm 概念，通过 reducers, effects 和 subscriptions 组织 model
• 插件机制，比如 dva-loading可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
• 支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

配置index.js

import dva from "dva";

let app=dva();//创建应用，返回 dva 实例
app.use(hooks);//配置 hooks 或者注册插件。（插件最终返回的是 hooks ）
app.model();//注册model
app.router(路由对象);//必须是函数创建的React
app.start("#root");//挂载节点

配置model

export default {
    //    命名空间  以便调用
    namespace: 'home',
    //初始值
    state: {
        list: []
    },
    //用于处理同步操作，可以修改state
    reducers: {
        //save前面调用的一个key值
        save(state, action) {
            state.list = action.payload;
            return {...state };
        }
    },
    //用于处理异步操作和业务逻辑，不直接修改state
    effects: {
        //add 前面调用的一个key值
        * add({ payload }, { call, put }) {
            //第一个参数是接的参数
            //call（函数，传的参数）一般用于请求数据 
            const result = yield call(getlist);
            //put一般调用reducers的方法来修改state里的值
            yield put({ type: 'save', payload: result.data });
        }
    }
};

路由对象

import React from 'react';
import { Router, Switch, Route, Redirect } from 'dva/router';
import RouterView from './router/RouterView';
import routes from './router/routes';

function App({ history }) {
   return (
      <Router history={history}>
         <div className="app">
            <Switch>
              <Route path="/home" component={Home}/>
              <Redirect from="/" to="/home"></Redirect>
            </Switch>
         </div>
      </Router>
   );
}
export default App;

页面

import React, { Component } from 'react';
import { connect } from 'dva';

class Home extends Component {
   componentDidMount() {
      if (this.props.home.list.length > 0) {
         return;
      } else {
        //调用home库里的add方法获取数据
         this.props.dispatch({
            type: 'home/add'
         });
      }
   }
   render() {
      let { list } = this.props.home;
      return (
         <div>
            <div className="main">
               home page
               {list.map(item => {
                  return <div key={item.id} >{item.name}</div>;
               })}
            </div>
         </div>
      );
   }
}
const mapStateToProps = state => {
   console.log(state, 'state');
   return {
      home: state.home
   };
};
export default connect(mapStateToProps)(Home);

connect和redux用法差不多 不同之处dva里的connect一般只需要取数据 修改数据一般调用this.props.dispatch

在使用HashRouter进行开发过程中，会遇到这个问题会报一个警告

Warning: hash history cannot push state it is ignored

hash模式下不能进行push state操作，解决办法是使用1，不使用2

1.this.props.history.push({ pathname: ${url}, state: { nodeType: nodeType }}) //1
2.this.props.history.push(${url}, { nodeType: nodeType }) //2