ant-design-pro uni.js & dev.js

- 构造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。数据源可以是当前的时间等