我可以将获取的数据存储到存储中并在另一个组件中使用它吗？

Question

我制作了一个简单的应用程序，它从模拟 API 获取数据并将其显示在 UI 上。 我的数据是一个对象数组。

我得到这样的数据：

export const getPlayerData = async (): Promise<IPlayerProps[]> => {
  const response = await axios.get(
    `https://6360055fca0fe3c21aaacc04.mockapi.io/player`
  );

  return response.data;
}

并像这样将它传递给父组件：

const { data, status }: UseQueryResult<IPlayerProps[], Error> = useQuery<
    IPlayerProps[],
    Error,
    IPlayerProps[]
  >('players', getPlayerData);

所以我之后要做的只是映射对象数组并显示数据。

我的问题是，例如，一位雇主要求我使用 Redux 并在父组件和子组件之间共享数据。我可以使用 Redux 存储来存储对象数组并在另一个页面中使用它吗？

任何帮助，将不胜感激！ :)

Answer 1

使用redux，您可以创建一个reducer，它将定义哪些数据应该存储在状态中。当调度各种动作时，可以根据您希望通过每个动作创建者调用更改的内容将不同的数据存储在状态中。当你调度一个动作来获取数据时，你也可以有一个“成功”的状态动作，它可以让 reducer 知道用新数据更新状态。然后，您可以使用选择器从任何子组件的状态中获取该数据。如果您将商店包装在整个应用程序中，您几乎可以在任何地方使用它。

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 (...);
}

您将需要使用基本 redux 来设置商店和一切。我建议在最顶层创建商店

对于现代切片方法，请看这里scroll to create slice