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');

数据流图

dva 笔记

[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

dva 笔记

上一篇:20145336《网络对抗技术》Exp6 信息搜集技术


下一篇:android UI线程安全问题