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}){

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