使用redux，您可以创建一个reducer，它将定义哪些数据应该存储在state上。当调度各种操作时，可以根据您希望在每个操作创建者调用中更改的内容，将不同的数据存储在state上。当您调度一个操作来获取数据时，您还可以有一个“成功”状态操作，它可用于使reducer知道用新数据更新状态。然后，您可以使用选择器从任何子组件的状态中获取数据。如果您将存储区 Package 在整个应用程序中，则几乎可以在任何地方使用它。
Skip to section on "state, actions, and reducers"

// actions file

import {createAction} from '@reduxjs/toolkit';

export const FETCH_DATA_REQUESTED = 'FETCH_DATA_REQUESTED'
export const fetchDataRequested = createAction<any>(FETCH_DATA_REQUESTED);

export const FETCH_DATA_SUCCEEDED = 'FETCH_DATA_SUCCEEDED'
export const fetchDataSucceeded = createAction<any>(FETCH_DATA_SUCCEEDED);

// reducer file

import * as Actions from './actions';

export const initialState = {
  data: null,
  loading: false,
}

export default function (state = initialState, action) {
  const {type, payload} = action;
  switch (type) {
    case Actions.FETCH_DATA_REQUESTED:
      return {
        ...state,
        loading: true
      }
    case Actions.FETCH_DATA_SUCCEEDED:
      return {
        ...state,
        data: payload.data,
        loading: false
      }
    default:
      return state;
  }
}

// selectors file (memoized data)

import { createSelector } from 'reselect';
import { initialState } from './reducer';

export const getPageState = (state) => state.somePageState || {};

export const getSomeData = createSelector(getPageState, (state) => state.data);

您可以使用react-redux中的“useDispatch（）”在获取数据后调度成功的操作。

// page a
import { useDispatch } from 'react-redux';

import { fetchDataSucceeded } from './actions';

const PageA = (props) => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    // fetch some data
    ...
    // after fetch
    dispatch(fetchDataSucceeded, data);
  }, [])

  return (...);
}

// page b
import { getSomeData } from './selectors';
import { useDispatch, useSelector } from 'react-redux';

const PageB = (props) => {
  const data = useSelector(getSomeData);

  return (...);
}

你需要使用base redux来建立一个商店和所有的东西。我建议在最顶层创建商店
对于现代切片方法，请查看此处scroll to create slice