pingssys-dva基础

1.dva简介

• dva是一个基于redux和redux-saga的数据流方案，额外内置了react-router和fetch
• dva说明

2.安装部署

• 安装
  • 安装：npm install dva-cli -g
  • 查看：dva -v
• 运行
  • 创建新应用：dva new demo
  • 启动本地开发服务器：npm start
  • 编译：npm run build

3.dva概念

A.数据流向

• 数据的改变发生通过用户交互行为或者浏览器行为触发
• 通过dispatch发起一个action
• 同步行为通过Reducers改变State
• 异步行为会先触发Effects，然后流向Reducers最终改变State

B.Models

• State：表示Model的状态数据
• Action：
  • 改变State的唯一途径。所有数据源所获得的数据，最终都会通过dispatch函数调用一个 action，从而改变对应的数据
  • 必须带有type属性指明具体的行为，其它字段可以自定义
  • 需要使用dispatch函数发起action，dispatch是在组件connect Models后，通过props传入
• dispatch函数
  • 用于触发action的函数
  • connect Model的组件通过props访问dispatch，可以调用Model中的Reducer/Effects
• Reducer
  • 合并之前已经累积的结果和当前要被累积的值，返回一个新的累积结果
  • 积累的当前model的state对象
  • 必须是纯函数 ，以同样的输入必然得到同样的输出
• Effect(副作用)：处理异步操作
• Subscription：订阅一个数据源，从源获取数据的，然后根据条件dispatch需要的action
• Router：前端路由
• Route Components：需要connect Model的组件都是Route Components，在/routes/目录下
• 示例

export default {
    //**namespace: 当前Model的名称。整个应用的State，由多个小的Model的State以namespace为key组成*/
    namespace: 'products',
    //**state初始值*/
    state: [],
    //**reducers接收action，处理同步动作，更新state */
    reducers: {
        delete(state, {payload: id}) {
            return state.filter(item => item.id !== id);
        },
    },
    //**Action 处理器，处理异步动作。必须是Generator函数，使用yield标识每一步操作*/
    effects: {
        * test(action, { call, put }) {
            //**执行异步函数*/
            yield call(delay, 1000);
            //**发出一个Action，调用reducers -> delete*/
            yield put({ type: 'delete' });
        },
    },    
};

4.dva+umi示例

dva+umi示例