dva是一个状态管理工具，整合了redux，redux-saga，react-router,fetch等框架，目前只能用于react的状态管理
1. dva的models
dva的主要作用还是整合了redux，redux-saga的多文件的分散的写法，将state,reducers,effects这些常用的状态
处理方法集中在一个model中，其形式如下：
import * as userService from '../services/userService'
export default {
namespace: "users",
state: {
list:[]
},
reducers: {
save(state, {payload:{data}}) {
state.list = data;
return {...state}
},
removeItem(state, {item}) {
state.list = state.list.filter(function (lItem) {
return item.id !== lItem.id
});
return{...state}
}
},
//effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。
//这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。
effects: {
* fetch(payload,{put, call}) {
const data = yield call(userService.fatchData);
yield put({type: "save", payload: data})
},
* fetchRemoveItem({item},{put,call}){
const result = yield call(userService.fetchRemoveItem,item.id);
if (result){
console.log(true);
yield put({type:"removeItem",item})
}else{
console.log(false);
}
}
},
subscriptions: {
setup({dispatch}) {
dispatch({type: 'fetch'})
}
}
}要在全局的app中注册model
app.model(require('./models/users').default);2. dva的models的几点说明
namespace: 全局状态的属性，通过global.namespace来访问对应model的state
reducers: 同步修改状态的方法
effects: 异步修改状态的方法，effects中使用的还是generator，与redux-saga中的调用完全一致，
不能直接调用reducers中的同步方法，通过put({'reducer方法名',payload})的形式来
调用reducer中的方法
subscriptions: subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。
在 app.start() 时被执行，数据源可以是当前的时间、服务器的websocket 连接、
keyboard 输入、geolocation 变化、history 路由变化等等
这个结构与vuex的结构十分类似
state -> reducers -> effects 对应 state -> mutations -> actions
3. dva中的状态传递
依然采用react-redux的方法，用connect,mapStateToProps来解决
4. dva中的全局事件
dva中提供了一下全局的事件，来解决注册和拦截问题
const app = dva({
history,
initialState,
onError,
onAction,
onStateChange,
onReducer,
onEffect,
onHmr,
extraReducers,
extraEnhancers,
});onError: effect 执行错误或 subscription 通过 done 主动抛错时触发，可用于管理全局出错状态
onAction: 在 action 被 dispatch 时触发，用于注册 redux 中间件
onStateChange: state 改变时触发，可用于同步 state 到 localStorage，服务器端等
onReducer: 封装 reducer 执行，全局拦截reducer
onEffect: 封装 effect 执行，全局拦截effect
onHmr: 全局处理热替换
extraReducers: 指定额外的 reducer
extraEnhancers: 指定额外的 StoreEnhancer
参考：http://www.cnblogs.com/axel10/archive/2018/03/12/8548305.html