React Redux 中跨组件共享 API 响应数据：最佳实践-js教程-PHP中文网

React Redux 中跨组件共享 API 响应数据：最佳实践

花韻仙語

发布： 2025-08-24 19:22:01

原创

512人浏览过

react redux 中跨组件共享 api 响应数据：最佳实践

本文旨在解决 React Redux 应用中，如何有效地在不同组件之间共享从 API 获取的数据，特别是 customerId 这样的关键信息。文章将深入探讨 Redux reducer 的正确实现方式，避免 state 突变，并提供使用 useDispatch 和 useSelector hook 的最佳实践示例，确保数据在整个应用中保持一致和可访问。

Redux Reducer 的正确实现：避免 State 突变

Redux 的核心原则之一是 state 的不可变性。这意味着在 reducer 中，我们不应该直接修改现有的 state 对象，而是应该创建一个新的 state 对象，并返回它。直接修改 state 会导致难以追踪的 bug，并破坏 Redux 的时间旅行调试功能。

以下是一个常见的错误示例：

const Datareducer = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_DATA:
      const output = action.payload;

      if (output.sessionDetails) {
        state.sessionDetails = output.sessionDetails; // 错误：直接修改 state
      }

      return {
        ...state,
      }
      break;

    default:
      return state;
  }
}

登录后复制

正确的做法是使用展开运算符 (...) 创建 state 的浅拷贝，然后在拷贝对象上进行修改。

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_DATA:
      const { sessionDetails } = action.payload;

      if (sessionDetails) {
        return {
          ...state,
          sessionDetails: {
            ...state.sessionDetails,
            ...sessionDetails,
          }
        };
      }

      return state;

    default:
      return state;
  }
};

登录后复制

解释：

...state: 创建一个新的对象，包含 state 的所有现有属性。
sessionDetails: { ...state.sessionDetails, ...sessionDetails }: 创建一个新的 sessionDetails 对象，首先复制现有的 state.sessionDetails 属性，然后用 action.payload.sessionDetails 中的属性覆盖它们。

这种方法确保了我们始终返回一个新的 state 对象，从而保持了 state 的不可变性。

在 React 组件中使用 useDispatch 和 useSelector

useDispatch 和 useSelector 是 react-redux 提供的两个重要的 hook，用于在 React 组件中与 Redux store 进行交互。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

useDispatch: 用于获取 dispatch 函数的引用，允许你触发 Redux actions。
useSelector: 用于从 Redux store 中提取数据。

以下是一个使用 useDispatch 获取 API 数据并更新 Redux store 的示例：

import { useDispatch } from 'react-redux';
import * as types from './action'; // 假设你定义了 actions

const Test = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const sessionInformation = async () => {
      const sessionId = '5f9f0de7-c7b3-3029';

      console.log("sessionInformaiton: ", sessionId);

      try {
        const { data } = await SessionInformationService({ sessionId });

        console.log("Result: ", { data });

        if (data) {
          const userData = {
            sessionDetails: {
              customerId: data.customerId,
              firstName: data.customerfirstName,
              lastName: data.customerlastName,
              fullName: data.customerfullName,
            }
          };

          dispatch(types.updateData(userData));
        }
      } catch (error) {
        // handle any errors, if necessary, or ignore, your call
      }
    };

    sessionInformation();
  }, []);

  return (
    <>
      ...
    </>
  );
};

export default Test;

登录后复制

解释：

useDispatch(): 获取 dispatch 函数。
useEffect(): 在组件挂载后执行一次。
sessionInformation(): 一个异步函数，用于获取 API 数据。
SessionInformationService(): 一个假设的 API 服务函数，返回一个 Promise。
dispatch(types.updateData(userData)): 触发 updateData action，将 API 数据存储到 Redux store 中。

以下是如何使用 useSelector 从 Redux store 中获取 customerId 的示例：

import { useSelector } from 'react-redux';

const SomeComponent = () => {
  const { customerId } = useSelector(
    state => state.app.DataReducer.sessionDetails.customerId
  );

  return (
    <div>
      Customer ID: {customerId}
    </div>
  );
};

登录后复制

解释：

useSelector(state => state.app.DataReducer.sessionDetails.customerId): 从 Redux store 中提取 customerId。 state.app.DataReducer.sessionDetails.customerId 是根据你的 reducer 结构定义的选择器函数。确保你的选择器函数与你的 Redux store 的结构匹配。

注意事项：

确保你的 Redux store 结构正确，以便 useSelector 可以正确地提取数据。
使用 memoization 技术优化 useSelector 的性能，避免不必要的重新渲染。可以使用 reselect 库或 useMemo hook 来实现 memoization。

总结

通过正确地实现 Redux reducer，避免 state 突变，并有效地使用 useDispatch 和 useSelector hook，你可以在 React Redux 应用中轻松地在不同组件之间共享 API 响应数据。始终记住保持 state 的不可变性，并使用正确的选择器函数来访问 Redux store 中的数据。这将使你的应用程序更易于维护，更可靠且更高效。

以上就是React Redux 中跨组件共享 API 响应数据：最佳实践的详细内容，更多请关注php中文网其它相关文章！