dva 的基本用法

dva 是一个状态管理工具, 整合了 redux,redux-saga,react-router,fetch 等框架, 目前只能用于 react 的状态管理

1. dva 的 models

dva 的主要作用还是整合了 redux,redux-saga 的多文件的分散的写法, 将 state,reducers,effects 这些常用的状态

处理方法集中在一个 model 中, 其形式如下:import*asuserServicefrom'../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){

returnitem.id!==lItem.id

});

return{...state}

}

},

//effects 指的是涉及到异步请求的方法. 通常用来调用服务获取数据.

// 这里要注意如果 effects 的方法名与 reducers 中存在重复的话容易造成死循环.

effects:{

*fetch(payload,{put,call}){

constdata=yieldcall(userService.fatchData);

yieldput({type:"save",payload:data})

},

*fetchRemoveItem({item},{put,call}){

constresult=yieldcall(userService.fetchRemoveItem,item.id);

if(result){

console.log(true);

yieldput({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 中提供了一下全局的事件, 来解决注册和拦截问题constapp=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

来源: http://www.bubuko.com/infodetail-2735360.html