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