- 构造model 和 services
新建的文件名字和src/pages相同，umi.js会自动注入同名业务代码
利用dva.ja中的fetch方式访问接口数据，然后在src/utils/request.js编写一层fetch封装方法；
dva.js通过model的概念把一个领域的模型管理起来，包含同步更新state的reduce若是，处理异步逻辑的effects，订阅数据源的subscriptions
-
namespace：表示在全局state上的唯一名称 -
state：表示初始值 -
reducers：用于处理同步操作，唯一可以修改state的地是一个函数，接受 state 和 action，返回老的或新的 state 。即：
(state, action) => state -
effects：以key/value格式定义effect。用于处理异步操作和业务逻辑，不直接修改state
put： 用于触发 action 。
yield put({ type: 'todos/add', payload: 'Learn Dva' });
call：用于调用异步逻辑，支持 promise 。
const result = yield call(fetch, '/todos');
select：用于从 state 里获取数据。
const todos = yield select(state => state.todos);
-
subscriptions：用于订阅一个数据源，然后根据需要 dispatch 相应的 action
- dvaJs 的 effects-generators
dav的effects是通过generator阻止的，generator返回的是迭代器，通过yield实现暂停功能。
- dvaJS的Model以及数据流向图解
-
namespace表示在全局 state 上的 key -
state是初始值，在这里是空数组 -
reducers等同于 redux 里的 reducer，接收 action，同步更新 state
@connect
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
);
};
// export default Products;
export default connect(({ products }) => ({
products,
}))(Products);
image
-
state：表示Model的状态数据，为一个js对象或任何值，操作时要当做不可变数据来对待，保证每次都是新对象，来保证state的独立性，便于测试和追踪变化；
-
action：改变state的唯一途径；action必须带有type属性指明具体的行为，其他字段可以自定义，如果要发起一个action需要使用dispatch函数，dispatch在组件connect Models以后，通过props传入。
-
dispatch：dispatch是一个用于触发action的函数，action是改变state的唯一途径，但是只描述了一个行为，而dispatch可以看做是触发这个行为的方式，reducer则是描述如何改变数据的。【组件通过props可以访问到dispatch，可以调用model中的reducer或者effects】
-
reducer：接受两个参数：之前已经累积运算的结果，和当前要被累积的结果。该函数把一个集合归并成一个单值（state，action），返回一个全新的数据（独立，纯净）
-
effect：异步操作，dav在底层引入了redux-sagas做异步流控制，采用了generator的相关概念，将异步转成同步的写法，从而将effects转为纯函数。
-
subscription：从源获取数据的方法，语义是订阅，用于订阅一个数据源，然后根据条件dispatch需要的action。数据源可以是当前的时间等
网友评论