umi中使用dva

1.创建目录
在src中创建models文件夹，并导出model
@/models/index.ts

const model: any = {
  namespace: 'model',
  //数据
  state: {
    name: 'jack',
  },
  // 异步修改数据  注意：effects和reducers中的方法名不能重复
  effects: {
    *getName({payload}, { call, put, select }) { // payload参数
      const data = yield call(requestFunction); //请求数据
      yield put({
        type: 'saveName',    //调用reducers中的saveName
        payload: data,       //传入请求的数据
      });
    }
  },
  // 同步修改数据
  reducers: {
    saveName(state = { name: '' }, { payload }): any {  // state是当前状态的值，如果未被修改过，那么state为空，默认值为{ name: '' }。  payload 是调用dispatch时传过来的值。
      return {
        ...state,
        name: payload.name   //请求到的数据
      };
    }
  },
};

export default model;

2.在.umirc.ts或config.ts中增加配置项

dva:{}

3.在组件中使用

//connect 需要引入
import { connect } from 'umi';

//引入方法
const { dispatch, model } = props; 

//链接：通过这种方式来把model层的数据传递到当前组件了
export default connect(
    ({ model }) => ({ // 可以解构为任何 一个/多个 namespace名称，或者不解构，那就是所有的namespace
      model,    // 让页面的props.model等于解构的model（model：上一行解构的namespace名称）
    })
)(页面组件名);

//调用方法
dispatch({
  type: 'model/saveName',   // namespace/方法名
  payload: {name:'rose'},   // 参数
});

4.组件案例

import { connect } from 'umi';

const Name = (props) => {
  const { models } = props;
  return (
    <>
      {models.name}
    </>
  );
};

export default connect(
    ({ models }) => ({
      models,
    })
)(Name);