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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。