umi中dva工作流程

定义model：
创建一个model文件来定义程序中的数据模型，在model文件中初始状态、监听器、异步请求等等
引入model：
在入口文件(app.js/index.js)中引入定义的model文件
使用model：
在组件中使用connect方法连接model和组件（connect是二者连接的桥梁），将模型中的状态和action通过使用props属性传递给组件
触发action：
action在组件中可以通过调用props来触发action，从而改变程序中数据的状态
数据更新：
当触发action时，dva会根据reducer和effect中的逻辑来更新数据模型的状态，触发reducer会同时更新状态，然而触发effect可以进行异步操作，在异步操作完成后再触发reducer更新状态

dva的状态管理的工作流程：

1. 创建 model 文件：在 src/models 目录下创建一个 model 文件。该文件定义一个 namespace 和关于model 的状态和操作的定义

// src/models/example.js

export default {
  namespace: 'example',
  state: {
    count: 0,
  },
  reducers: {
    increment(state) {
      return { ...state, count: state.count + 1 };
    },
  },
};

 2. 注册 model：在 src/models 目录下 index.js 文件中，将创建的 model 注册到 dva 中。

// src/models/index.js

import example from './example';

export default [example];

 3. 连接 dva：在应用入口文件（src/app.jsx）中，用 dva 连接

// src/app.jsx

import { create } from 'dva';
import models from './models';
import App from './App';

const app = create();
models.forEach((model) => app.model(model));
app.router(App);
app.start('#root');

4. 在组件中使用状态：在需要使用状态的组件中，使用 connect 函数从 dva 的 state 中获取状态值，并可以通过 dispatch 方法触发 reducers 中定义的操作

import React from 'react';
import { connect } from 'dva';

function Example({ count, dispatch }) {
  const handleIncrement = () => {
    dispatch({ type: 'example/increment' });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default connect(({ example }) => ({
  count: example.count,
}))(Example);

使用 connect 函数将组件和 dva 建立连接，可以从 dva 的 state 中获取到 example model 的 count 属性，并将其作为组件的 props 进行传递，我们可以通过 dispatch 方法触发example model 中的 increment 操作

首先定义 model 文件，其次注册 model，最后组件和Dva建立连接（用 connect 函数）

实现简洁、方便及高效的状态通信