umi 中数据管理

model.ts

  import { Effect, ImmerReducer } from 'umi';
  import {queryActGmvData} from './service';
  
  interface IActGmvDataModal {
  amt: number; //累计GMV
  currentAmt: number | string; //今日GMV
  target: number; //活动目标GMV
  actTargetProcess: number; //活动目标完成进度
  actTimeProgress: number; //活动时间进度
}

export interface PanelModelState {
  actGmvData: IActGmvDataModal;
}

export interface PanelModelType {
  namespace: string;
  state: PanelModelState;
  reducers: {
    setActGmvData: ImmerReducer<PanelModelState>;
  };
  effects: {
    getActGmvData: Effect;
  };
}

const CreatModel: PanelModelType = {
  namespace: 'panel',
  state: {
    actGmvData: {
      amt: 0, //累计GMV
      currentAmt: 0, //今日GMV
      target: 0, //活动目标GMV
      actTargetProcess: 0, //活动目标完成进度
      actTimeProgress: 0, //活动时间进度
    },
  },
  reducers: {
    setActGmvData: (state, action) => {
      state.actGmvData = action.payload;
    },
  },
  effects: {
    *getActGmvData({ payload }, { call, put }) {
      const result = yield call(queryActGmvData, payload);
      if (result.code === 200 && result.body && result.body.result) {
        yield put({
          type: 'setActGmvData',
          payload: result.body.result,
        });
      }
    },
  },
};

export default CreatModel;

使用model.ts的模块

import { connect, PanelModelState } from 'umi';

type ICreatePageProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> & {};
  
const ActiveDataPanel: FunctionComponent<ICreatePageProps> = (props) => {

useEffect(()=>{
props.getActGmvData(appId,actCode)
},[])

return(
<div>{props.actGmvData}</div>
)
  }
  
  const mapStateToProps = ({
  panel,
}: {
  panel: PanelModelState;
}) => {
  return {
    actGmvData: panel.actGmvData,
  };
};

const mapDispatchToProps = (dispatch: Function) => ({
  getActGmvData: (appId:string,actCode:string) => {
    dispatch({
      type: 'panel/getActGmvData',
      payload: { appId,actCode },
    });
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(ActiveDataPanel);