使用useReducer抽离方法管理状态

hooks文件

import React, { createContext, useReducer, useContext, useEffect, useState } from 'react';

import { ACTIONS } from './actions';

import reducer from './reducer';

const ReportContext = createContext({});

const ReportProvider = ({ children }) => {

  const [state, dispatch] = useReducer(reducer, {

初始化定义需要使用的变量

  });

  const value = { state, dispatch };

  return <ReportContext.Provider value={value}>{children}</ReportContext.Provider>;

};

const useReportContext = () => useContext(ReportContext);

export { ACTIONS, ReportProvider, useReportContext };

actions文件类容

export const ACTIONS = {
  SET_IDS: 'set_ids',
  SET_DATASOURCE_TYPE: 'set_datasource_type',
  SET_DATASOURCE_MENU: 'set_datasource_menu',
  SET_REPORT_DATA: 'set_report_data',
  SET_TOP_VALUES: 'setTopValues',
};

reducer文件类容

import { ACTIONS } from './actions';

/** 设置对比任务ID */
const setIds = (state, payload) => {
  return {
    ...state,
    ids: payload,
  };
};

/** 设置选中的数据源 */
const setDatasourceType = (state, payload) => {
  return {
    ...state,
    datasourceType: payload,
  };
};

/** 设置数据源Tab */
const setDatasourceMenu = (state, payload) => {
  return {
    ...state,
    datasourceMenu: payload,
  };
};

/** 设置报表数据对象，以洞察任务ID为key */
const setReportData = (state, payload) => {
  return {
    ...state,
    reportData: payload,
  };
};


// 管理所有处理函数
const handlerMap = {
  [ACTIONS.SET_IDS]: setIds,
  [ACTIONS.SET_DATASOURCE_TYPE]: setDatasourceType,
  [ACTIONS.SET_DATASOURCE_MENU]: setDatasourceMenu,
  [ACTIONS.SET_REPORT_DATA]: setReportData,
};

const reducer = (state, action) => {
  const { type, payload } = action;
  const handler = handlerMap[type];
  const res = typeof handler === 'function' && handler(state, payload);
  return res || state;
};

export default reducer;

在这里统一管理他们的状态逻辑

使用的时候把文件引入进去把这个ReportProvider包裹在你需要使用的模块组件最外层

然后在里面引入useReportContext就可以使用了

  const {

    state

    dispatch,

  } = useReportContext();

比如

   dispatch({

        type: ACTIONS.SET_IDS,

        payload: value,

      });