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

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将定义哪些数据应该存储在状态中。当调度各种操作时，可以根据每个操作创建者调用想要更改的内容，在状态上存储不同的数据。当你调度一个动作来获取数据时，你也可以有一个"成功"；状态操作，可用于让reducer知道用新数据更新状态。然后，您可以使用选择器从ANY子组件的状态中获取数据。如果将存储区封装在整个应用程序中，则几乎可以在任何地方使用它。

跳到"；状态、动作和减速器"；

// 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);

您可以使用"；useDispatch(("从react redux获取数据后调度成功的操作。在另一个文件中，您可以使用选择器来获取数据

// 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来建立一个商店和一切。我建议在最高级别的创建商店

对于现代切片方法，请查看此处滚动创建切片