hooks使⽤dva_dva的基本⽤法
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'exportdefault{
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}){
fetch最佳用法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
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