写在开头
dva的出现其实要因为它集合了redux和redux-saga。redux一直是用来负责“容器的状态(数据)”管理但是通过无数个例子我们发现其实更多的是它的reduer处理action来改变state来管理数组的同步操作，此时类似于请求接口的异步操作对于如何就有了分歧，此时就有了redux-saga的出现。redux-saga是用来管理redux应用异步操作的中间件。将异步操作用generator(构造器)的方式来管理。
简单点的记法
“一个管理同步，一个通过中间件管理异步”。
安装
dva安装
$ npm install dva-cli -g
$ dva -v
$ dva new dva-quickstart
例子
首先通过官方的例子来看以下大概的结构是什么样子的（真实项目肯定跟这个不一样，所以知道怎么哪一块怎么用就行了）
import React from 'react';
import dva, { connect } from 'dva';
import './style.css';
// 1. Initialize
const app = dva();
console.log(2);
// 2. Model
app.model({
namespace: 'count',
state: 0,
reducers: {
add (count) { return count + 1 },
minus(count) { return count - 1 },
},
});
class TestError extends React.Component {
componentDidCatch(e) {
alert(e.message);
}
componentDidMount() {
// throw new Error('a');
}
render() {
return <div>TestError</div>
}
}
// 3. View
const App = connect(({ count }) => ({
count
}))(function(props) {
return (
<div>
<TestError />
<h2>{ props.count }</h2>
<button key="add" onClick={() => { props.dispatch({type: 'count/add'})}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count/minus'})}}>-</button>
</div>
);
});
// 4. Router
app.router(() => <App />);
// 5. Start
app.start('#root');
分块解释(个人理解)
官方例子写的比较明白，以下部分就是对当前步骤的一些个人理解。
- 应用dva（）
// 1. 对dva初始化, 个人认为就是应用dva
const app = dva();
- model编写
model这块个人理解就是一个redux和redux-saga的reducer集合。
namespace用来充当标志(key)所在，后面的view层上会用到。
state和reducers就是redux的state（初始值）和reducers（处理数据的方法）
effects这个effects就是redux-saga的内容了。就是写个构造器，通过yeild的方式调用。也是reducer=>action这么一个套路
Tip:
dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。
call：执行异步函数
put：发出一个 Action，类似于 dispatch
// 2. Model模型编写
app.model({
namespace: 'count',
state: 0,
reducers: {
add (count) { return count + 1 },
minus(count) { return count - 1 },
},
// effects, call和put用来内部处理effects。
effects: {
function *addAfter1Second(action, { put, call }) {
yield call(delay, 1000);
yield put({ type: 'add' });
}
},
});
- view层如何触发
这一块就是用来展示如何触发的其实还是dispatch的触发方式，但是要处理state这块，因为你的namespace是count所以你的type就是count/xxx
// 3. View
const App = connect(({ count }) => ({
count
}))(function(props) {
return (
<div>
<TestError />
<h2>{ props.count }</h2>
<button key="add" onClick={() => { props.dispatch({type: 'count/add'})}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count/minus'})}}>-</button>
</div>
);
});
结尾
在真实项目中，dva肯定不会是这么简单的结构，但是只要对于namesapce、state, reducer, effects有了一定的认识，dva用起来的话，不是那么的困难。
这篇写的很剪短，但是对于各项都写了一点介绍，日常使用来说是足够了。如果有问题欢迎评论～看到了会及时回复。
