reducerExample.js

import React, { useReducer } from "react";

/* Page With Chart Data */
const pageWithChartState = {
  loading: false,
  error: false,
  chartData: [],
  filters: null
};
function pageWithChartReducer(state, action) {
  switch (action.type) {
    case "LOADING": //REPEATED
      return {
        ...state,
        loading: action.loading
      };
    case "ERROR": //REPEATED
      return {
        ...state,
        error: action.error
      };
    case "SET_CHART_DATA":
      // Maybe need to process the chart data before setting to state
      const chartData = action.data.filter();
      return {
        ...state,
        chartData
      };
    case "SET_FILTERS":
      return {
        ...state,
        filters: action.filters
      };
    default:
      return state;
  }
}
const PageWithChart = () => {
  const [state, dispatch] = useReducer(
    pageWithChartReducer,
    pageWithChartState
  );
  return <div>Chart</div>;
};

/* Another Page With Table Data */
const pageWithTableState = {
  loading: false,
  error: false,
  tableData: [],
  pagination: null
};
function pageWithTableReducer(state, action) {
  switch (action.type) {
    case "LOADING": //REPEATED
      return {
        ...state,
        loading: action.loading
      };
    case "ERROR": //REPEATED
      return {
        ...state,
        error: action.error
      };
    case "SET_TABLE_DATA":
      // Maybe need to process the table data, but in a different way than the chart data
      const tableData = action.data.map();
      return {
        ...state,
        tableData
      };
    case "SET_PAGINATION":
      return {
        ...state,
        pagination: action.pagination
      };
    default:
      return state;
  }
}
const PageWithTable = () => {
  const [state, dispatch] = useReducer(
    pageWithTableReducer,
    pageWithTableState
  );
  return <div>Table</div>;
};