dva 笔记

最简单的结构

// 建立应用
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 对象的属性

1. namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
2. state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
3. reducers: Action 处理器，处理同步动做，用来算出最新的 State
4. effects：Action 处理器，处理异步动做。基于 Redux-saga 实现。Effect 指的是反作用。根据函数式编程，计算之外的操做都属于 Effect，典型的就是 I/O 操做、数据库读写。 Effect 是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操做（不论是异步或同步）。

call 和 put

Dva 提供多个 effect 函数内部的处理函数，比较经常使用的是 call 和 put。

• call：执行异步函数
• put：发出一个 Action，相似于 dispatch