DvaJs

优点：简化redux操作流程，集成redux-saga中间件

• effects 异步 通过generator函数定义，所以要加 * 号， 类似于vueX中的action
• reducers 类似于vueX中的mutation
  在umi中使用dva要先找到 @umijs/plugin-dva

注意！！会以文件名作为命名空间

• 首先在config.ts文件开启

 dva: {
    immer: true,
    hmr: false,
  },

• src目录下建一个models文件夹

• 在页面组件中引入connect 注意要先在models下建好仓库文件并抛出对象
  不用connect的话可以通过useDispatch获取dispatch；useStore获取store

• 运行时为了方便查看数据变动可下一个日志包 yarn add redux-logger @types/redux-logger
  在app.tsx中进行配置

import { createLogger } from 'redux-logger';
import { message } from 'antd';
export const dva = {
  config: {
    onAction: createLogger(),
    onError(e: Error) {
      message.error(e.message, 3);
    },
  },
};

• 页面获取数据时
  在effects中定义方法例如 * getList （注意定义成generator函数）
  定义数据类型其中umi中有很多内置类型 参考以下用例

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';

export interface IndexModelState {
  name: string;
}

export interface IndexModelType {
  namespace: 'index';
  state: IndexModelState;
  effects: {
    query: Effect;
  };
  reducers: {
    save: Reducer<IndexModelState>;
    // 启用 immer 之后
    // save: ImmerReducer<IndexModelState>;
  };
  subscriptions: { setup: Subscription };
}

const IndexModel: IndexModelType = {
  namespace: 'index',

  state: {
    name: '',
  },

  effects: {
    *query({ payload }, { call, put }) {},
  },
  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
    // 启用 immer 之后
    // save(state, action) {
    //   state.name = action.payload;
    // },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({
            type: 'query',
          });
        }
      });
    },
  },
};

export default IndexModel;

在effects中
函数接受两个参数（接收到的数据，{此参数可以解构出call，put等方法}）

• call方法用来发起请求 它的第一个参数是引入的services文件夹下的文件中的请求函数，第二个参数为请求时要携带的参数比如分页的page
• put方法负责派发reducers 通过type判断派发哪个函数

effects: {
    *query({ payload }, { call, put }) {
        const {data}=yield call(请求函数,{page:1,pageSize:10})
        console.log(data);
        yield put({
          type:'reducers中想要调用的函数名',
          payload:data
        })
     },
  },

然后使用reducers异步修改state中的数据
reducers中的函数的第二个参数就是put传过来的对象，可以解构出payload
return 返回的状态会合并到state中

reducers: {
      setList(option,{payload}){
          return {
            //list:赋值
          }
      }
}

• 回到页面组件补充connect()()第一个圆括号中的参数
  connect链接后可以从props中结构出dispatch

import {useEffect} from "react"
useEffect(()=>{
        dispatch({
                type:”仓库文件名/函数名"
        })
},[])

connect((data)=>data)()