【Umi】umi-max 中使用 Dva

前置介绍

Umi 是一个基于 React 的可插拔企业级前端应用框架，Umi 提供了一系列的插件和约定，使得开发者能够以约定大于配置的方式进行开发，同时还支持丰富的功能扩展和插件机制。

Dva 是一个基于 Redux、Redux-Saga 和 React-Router 的数据流管理框架。它的目标是简化 React 应用中数据的流动和管理，提供一种可预测、可维护和可扩展的状态管理方案。Dva 的核心思想是将数据和逻辑组织成以模型（Model）为单位的概念，并通过约定的方式将它们组织在一起。

具体使用

umi 现在已经内置了 dva。

1. 首先需要配置 dva: {} 打开 Umi 内置的 dva 插件。

2. 创建 Model：在 Umi 项目的 src/models/ 目录下创建一个新的文件，例如 example.js，用于定义一个模型。

import UserConreoller from "@/services/user"

// src/models/example.js

export default {
  // 命名空间
  namespace: 'example',
  // 状态（数据）
  state: {
    data: [],
  },
  // 同步更新仓库状态数据
  reducers: {
    save(state, { payload }) {
      return { ...state, data: payload };
    },
  },
  // 异步更新仓库状态数据
  effects: {
    *fetchData({ payload }, { call, put }) {
      const response = yield call(UserConreoller.getUser, payload); // 调用异步请求接口
      yield put({ type: 'save', payload: response.data }); // 触发对应的 reducer
    },
  },
};

import { request } from '@umijs/max'

// src/services/user.js
function getUser() {
    return request('/api/user', {
        method: 'GET',
    })
}
export default {
    getUser
}

在上面的代码中，我们定义了一个名为 example 的模型，包含了初始状态 state 和两个方法：reducers 和 effects。reducers 用于处理同步操作，而 effects 用于处理异步操作。

3. 使用 Model：在 React 组件中使用我们定义的模型。

import {useDispatch} from '@umijs/max'

function ExampleComponent() {
  const dispatch = useDispatch()
  const { data } = useSelector(state => state.example)

  useEffect(() => {
    dispatch({ type: 'example/fetchData', payload: {} }); // 触发异步操作
  }, []);

  return (
    <div>
      {data}
    </div>
  );
}

export default ExampleComponent