Dva属性讲解
Model:
model是dva最重要的概念,以下是经典的例子:
app.model({
namespace: 'todo',
state: [],
reducers: {
add(state, { payload: todo }) {
// 保存数据到 state
return [...state, todo];
},
},
effects: {
*save({ payload: todo }, { put, call }) {
// 调用 saveTodoToServer,成功后触发 `add` action 保存到 state
yield call(saveTodoToServer, todo);
yield put({ type: 'add', payload: todo });
},
},
subscriptions: {
setup({ history, dispatch }) {
// 监听 history 变化,当进入 `/` 时触发 `load` action
return history.listen(({ pathname }) => {
if (pathname === '/') {
dispatch({ type: 'load' });
}
});
},
},
});
Model包括五个属性:
namespace:
model的命名空间,同时namespace也是在全局state上的属性,只能用字符串,不支持通过.的方式创建多层命名空间。
type:String
state:
State是整个应用的数据层。应用的state被存储在一个object tree中。应用的初始state在model中定义,也就是说,由model state组成全局state。操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。
reducers
以key/value的格式来定义reducer。用于处理同步操作,唯一可以修改state的地方,由action触发。格式为:(state, action) => newState 或者 [(state, action) => newState, enhancer]
他接收参数 state 和 action,返回新的 state,通过语句表达即 (state, action) => newState,所以不存在自加操作。该函数把一个集合归并成一个单值。
Reducer 的概念来自于是函数式编程,在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。
注意:Reducer函数必须是纯函数。
effects:
以key/value格式定义effect。用于处理异步操作和业务逻辑,不直接修改state。由action触发,可以触发 action,可以和服务器交互,可以获取全局 state 的数据等等。
subscriptions:
Subscriptions 表示订阅,用于订阅一个数据源,然后按需 dispatch action。格式为 ({ dispatch, history }) => unsubscribe 。比如:当用户进入 /y/monthCard/list 页面时,触发 action query 加载数据。
如果 url 规则比较复杂,比如 /users/:userId/search,那么匹配和 userId 的获取都会比较麻烦。这是推荐用 path-to-regexp 简化这部分逻辑。