dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。
redux :
Redux对于JavaScript应用而言是一个可预测状态的容器。换言之,它是一个应用数据流框架。
redux 和 redux-saga:
redux-saga可以理解为一个 和 系统交互的 常驻进程,可简单定义:
saga = Worker + Warcher
router :
可被路由的协议(Routed Protocol)由路由协议(Routing Protocol)传输,前者亦称为网络协议
fetch:Fetch (网页开发技术)
dva应用的最简单解构图解
State
State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);
(初始化)
Action
Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。
备注:action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。
dispatch({
type: ‘add’,
});
dispatch
dispatch 是函数
dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
dispatch({
type: ‘user/add’, // 如果在 model 外调用,需要添加 namespace
payload: {}, // 需要传递的信息
});
Reducer函数
Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。
(返回的是一个新的累积结果。注意这段话)
Effect
Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。
Subscription
Subscription
英 [s?b?skr?p?n]
定购;订阅;訂閱;预订;申购
这个过程叫做订阅数据
@connect(({ xpaModel,xpaDrawer ,loading}) => {
const pageKey = window.location.href;
return {
list: xpaModel.pageStates[pageKey].list,
detail: xpaModel.pageStates[pageKey].detail,
totalCount: xpaModel.pageStates[pageKey].totalCount,
pageno: xpaModel.pageStates[pageKey].pageno,
pagesize: xpaModel.pageStates[pageKey].pagesize,
tableLoading: loading.effects[‘xpaModel/doQuery’],
};
})
Subscriptions 是一种从 源 获取数据的方法,它来自于 elm。
Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。
index.js:1 uncaught at _callee TypeError: value.locale is not a function