dva的使用

1.安装dva-cli

npm install dva --save 

2.改造项目为dva模式，在src下修改入口文件index.js

import dva from 'dva';
import createHistory from 'history/createHashHistory';
import createLoading from 'dva-loading';
//1初始化创建应用
const app=dva({
	history:createHistory()
})
//2.plugins
app.use(createLoading())
// 3注册model
app.model(require('./models/global').default);
// 4. Router注册视图
app.router(require('./router').default);
//5.Start启动应用
app.start('#root');

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

import React from 'react';
import { routerRedux, Route, Switch } from 'dva/router';
//按需加载
import dynamic from 'dva/dynamic'
const { ConnectedRouter } = routerRedux;
const RouterConfig= (({ history,app }) => {
    //按需加载
    const dvaTest = dynamic({
        app,
        models:()=>['./model/dvaTest'],
        component: () => import('./page/dvaTest'),
      })
    
    return (
    <ConnectedRouter history={history}>
		<Switch>
			<Route path="/user" component={dvaTest} />
		</Switch>
	</ConnectedRouter>
    )
	
})
export default RouterConfig;

4.开始工作

1.编写ui component

2.定义Model

dva通过model的概念把一个领域的模型管理起来，包含同步更新state的reducer，处理异步逻辑的effect，订阅数据源的subscription

export default{
//namespace表示全局state上的key，当前Model的名称
	namespace:'products',
//state是初始值
	state:{
		productsList：[]
	},
//effect副作用处理异步动作
	effect:{
		*productFun({ payload }, { call, put }){
		//call执行异步函数
			 const response = yield call(products.productsGet, payload);
			 if (response.data) {
		//put发出一个action，相当于dispatch
			 yield put({
                        type: 'initFun',
                        payload: {list:response.data,id: payload.id}
                    });
			 }	
		}
	},
//reducers等同于redux里的reducer，接受action，同步动作更新state
	reducers:{
	initFun(state, action) {
	            return {
	                ...state,
	                id:action.payload.id,
	                productsList:action.payload.list
	            };
	        }
	}
}

5connect起来

dva提供了connect方法。这个connect就是react-redux的connect

// Products是ui组件
export default connect(({ products }) => ({
  products,
}))(Products);