最简单的结构
// 创建应用
const app = dva(); // 注册 Model
app.model({
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
effects: {
*addAfter1Second(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'add' });
},
},
}); // 注册视图
app.router(() => <ConnectedApp />); // 启动应用
app.start('#root');
数据流图
[https://dvajs.com/guide/introduce-class.html#数据流图-1]
Model 对象的属性
- namespace: 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
- state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
- reducers: Action 处理器,处理同步动作,用来算出最新的 State
- effects:Action 处理器,处理异步动作。基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。 Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)。
call 和 put
Dva 提供多个 effect 函数内部的处理函数,比较常用的是 call 和 put。
- call:执行异步函数
- put:发出一个 Action,类似于 dispatch