umi框架状态管理最佳实践--dva

Dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。 -- dva官网

状态管理对于一个项目来说，非常重要，组件式开发，尤其是那种交互比较复杂，嵌套比较深的，组件之间的传参非常的难受，经常会有需要跨组件传参，还有一些是祖孙之类的，所以想要更好的开发体验，必须要有状态管理，否则很难实现很好的组件拆分；

在umi框架中，使用dva作为状态管理是非常棒的体验；下面介绍下如何使用；

一，定义状态文件

在models文件夹下比如创建文件login.ts；umi在框架层面已经帮我们声明了，只要在models文件夹下面的文件会自动声明为状态管理文件；

  import { Action, Reducer } from 'umi';
  import { noauthApi, loginApi, userApi } from '@/api';
  export default {
    state: {
      homeData: {},
    },
    effects: {
      // 获取班级配置信息
      *homeDataFetch({ payload, callback }, { call, put }) {
        // 执行异步函数
        const res = yield call(() => noauthApi.classConfigGet(payload));
        if (res?.success) {
          callback && callback(res?.data);
          yield put({ type: 'homeDataSet', payload: res?.data });
        }
      },
      // 登出
      *logoutFetch({ payload, callback }, { call, put }) {
        // 执行异步函数
        const res = yield call(() => loginApi.logout(payload));
        if (res?.success) {
          callback && callback();
        }
      },
    },
    reducers: {
      homeDataSet(state: any, { payload = {} }): Reducer {
        return {
          ...state,
          homeData: payload,
        };
      },
    },
  };

介绍下几个概念
- state是存储状态的
- effects对象里面放得是ajax方法使用迭代器
- reducers存放的是改变状态state的方法

二，具体应用

第一步在顶部引入

import { useDispatch, useSelector } from 'dva'; // 引入

在React函数中声明

const dispatch = useDispatch(); // dipatch函数用来发送命令，调用reducers
const homeData = useSelector((state: any) => state.login.homeData);

直接把数据绑定在 dom上即可，如果数据更改会自动render

import { useDispatch, useSelector } from 'dva'; // 引入

const Login: React.FC = () => {
  const preState: any = history.location.state ?? {};
  const homeData = useSelector((state: any) => state.login.homeData);
  const dispatch = useDispatch();

  const btnClick = async (from: string) => {
    switch (from) {
      case 'logout':
        dispatch({	// 方法中直接调用 即可
          type: 'login/logoutFetch',
          callback() { 	// callback为回调
            outLogin();
          },
        });

以上就是我公司具体项目上的实践，希望对你有帮助！