写在前面
dva
是蚂蚁金服推出的一个单页应用框架,对redux
,react-router
,redux-saga
进行了上层封装,没有引入新的概念,但是极大的程度上提升了开发效率;下面内容为本人理解,如有错误,还请指出,不胜感激。
redux的痛苦
redux
的优点很多,痛点也有,比如异步控制,redux-saga
的出现使得异步操作变得优雅,但是基于redux-saga
不得不承认的一点就是开发过程实在是太麻烦了,假若增加一个操作,不得不操作actions
,reducers
,sagas
,对于sagas
可以还需要进行watch
,而后还要进行fork
;(PS: 本来就够麻烦了,再加上一个sagas
);在添加一个操作时,不得不操作这么多的文件,实在是麻烦,而dva
的出现在一定程度上解决了这个问题。
dva基本概念
未使用dva
下的目录经常是这样的:
actions
--/ user.js
--/ team.js
reducers
--/ user.js
--/ team.js
sagas/
--/ user.js
--/ team.js
dva
将其合并:
models
--/ user.js
--/ team.js
dva
中有着几个概念:
namespace => combineReducers中对应的key值
state => 对应初始的state,也就是initialState
effects => saga的处理函数
reducers => 对应reducers,不同的是,写法上将switch...case转化为对象
除了这些以外,dva
中还有subscriptions
,这一概念来源于elm
,
dva的实现
初始化
const app = dva({
history: browserHistory
});
上面的过程发生了什么?
dva
本质上调用了下面函数:
function dva(hooks = {}) {
const history = hooks.history || defaultHistory;
const initialState = hooks.initialState || {};
delete hooks.history;
delete