react+redux tab切换不覆盖之前的数据

import { Reducer } from 'redux';
import { Effect } from '@/models/connect';

export type DType = '0' | '1' | '2' | '3';

export interface IState {
  dataList: {
    [key in DType ]: any;
  };
  listConfig: {
    [key in DType]: any;
  };
}

export interface IModelType {
  namespace: 'wiki';
  state: IState;
  effects: {
    getList: Effect;
  };
  reducers: {
    save: Reducer;
    clear: Reducer;
  };
}

const defState: IState= {
  // 表格配置
  dataList: {
    '0': {} as any,
    '1': {} as any,
    '2': {} as any,
    '3': {} as any,
  },
  listConfig: {
    '0': {
      pageNum: 1,
      type: '',
    } as any,
    '1': {
      pageNum: 1,
      type: '',
    } as any,
    '2': {
      pageNum: 1,
      type: '',
    } as any,
    '3': {
      pageNum: 1,
      type: '',
    } as any,
  },
};
const wiki: IModelType = {
  namespace: 'wiki',
  state: { ...defState },
  effects: {
    *getList({ payload }, { call, put, select }) {
      const { type, pageNum } = payload;
      let oldList = yield select((state) => state.wiki.dataList);
      // 获取列表配置
      let listConfig = yield select((state) => state.wiki.listConfig);
      // 判断是否跳转翻页
      if (payload.pageNum) {
        // 修改配置
        listConfig = {
          ...listConfig,
          [type]: {
            pageNum,
          },
        };
      }
      if (Object.keys(payload).length > 0) {
        listConfig = {
          ...listConfig,
          [type]: { ...listConfig[type], ...payload },
        };
      }
      const resData = yield call(请求的接口, 参数);
      oldList = {
        ...oldList,
        [type]: resData,
      };
      if (listConfig[type].pageNum !== 1) {
        yield put({
          type: 'save',
          payload: {
            dataList: {
              ...oldList[type],
              records: [...oldList[type].records, ...resData.records],
            },
            listConfig,
          },
        });
      } else {
        yield put({
          type: 'save',
          payload: {
            dataList: oldList,
            listConfig,
          },
        });
      }
    },
  },

  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
    clear() {
      return {
        ...defState,
      };
    },
  },
};

export default wiki;

你可能感兴趣的:(react+redux tab切换不覆盖之前的数据)