【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.jsexport 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