React 和 Redux 中跨组件共享 API 响应数据-js教程-PHP中文网

React 和 Redux 中跨组件共享 API 响应数据

聖光之護

发布： 2025-08-24 18:50:47

原创

702人浏览过

react 和 redux 中跨组件共享 api 响应数据

本文旨在解决 React 和 Redux 应用中，API 响应数据如何在不同组件间共享的问题。通过正确使用 Redux 的 useDispatch 和 useSelector Hook，以及避免 Reducer 中的状态突变，可以有效地将 API 数据存储在 Redux store 中，并在各个组件中访问，实现数据的全局共享。本文提供详细的代码示例和注意事项，帮助开发者构建更健壮的 React + Redux 应用。

使用 Redux 管理全局状态

在 React 应用中，Redux 是一个常用的状态管理工具，用于集中管理应用的状态。当我们需要在多个组件之间共享数据时，Redux 可以派上用场。以下是如何使用 Redux 在组件之间共享 API 响应数据的步骤。

1. Reducer 的正确实现

Reducer 是 Redux 的核心概念之一，负责根据 Action 更新 state。一个常见的错误是在 Reducer 中直接修改 state，这会导致不可预测的行为。正确的做法是创建一个 state 的副本，然后在副本上进行修改。

以下是一个修改后的 Reducer 示例：

import * as types from './action';

export const initialState = {
  sessionDetails: {
    customerId: '',
    customerfirstName: '',
    customerlastName: '',
    customerfullName: ''
  }
}

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;
  }
};

export default dataReducer;

登录后复制

注意：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

使用扩展运算符 (...) 创建 state 的浅拷贝，确保不直接修改原始 state。
只处理 UPDATE_DATA action，对于其他 action，返回原始 state。

2. 组件中获取数据和更新状态

在 React 组件中，使用 useDispatch Hook 触发 Action，使用 useSelector Hook 获取 state。

以下是一个修改后的组件示例：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as types from './action';
import { SessionInformationService } from './api'; // 假设的 API 服务

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,
              customerfirstName: data.customerfirstName,
              customerlastName: data.customerlastName,
              customerfullName: data.customerfullName,
            }
          };

          dispatch(types.updateData(userData));
        }
      } catch (error) {
        // 处理错误，如果需要
        console.error("Error fetching session information:", error);
      }
    };

    sessionInformation();
  }, [dispatch]); // 依赖 dispatch，确保每次 dispatch 更新时 useEffect 重新执行

  return (
    <>
      {/* 组件内容 */}
    </>
  );
};

export default Test;

登录后复制

注意：

使用 useDispatch 获取 dispatch 函数。
在 useEffect 中发起 API 请求，并在请求成功后 dispatch updateData action。
添加错误处理，防止 API 请求失败导致应用崩溃。
确保 useEffect 的依赖数组中包含 dispatch，以便在 dispatch 函数更新时重新执行 effect。

3. 从 Redux Store 中获取数据

使用 useSelector Hook 从 Redux store 中获取数据。

import { useSelector } from 'react-redux';

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

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

登录后复制

注意：

useSelector 接受一个函数作为参数，该函数接收 Redux store 的 state 作为参数，并返回需要的数据。
selector 函数应该尽可能的小，只选择需要的数据，避免不必要的组件重新渲染。

4. Action 的定义

Action 是一个包含 type 属性的 JavaScript 对象，用于描述发生了什么。

export const UPDATE_DATA = 'UPDATE_DATA';

export const updateData = payload => ({
  type: UPDATE_DATA,
  payload
});

登录后复制

注意：

Action type 应该是一个常量字符串，用于在 Reducer 中识别 Action。
Action payload 包含需要更新的数据。

总结

通过以上步骤，我们可以有效地使用 Redux 在 React 组件之间共享 API 响应数据。关键在于：

Reducer 的正确实现： 避免直接修改 state，使用扩展运算符创建 state 的副本。
组件中获取数据和更新状态： 使用 useDispatch 触发 Action，使用 useSelector 获取 state。
从 Redux Store 中获取数据： 使用 useSelector 从 Redux store 中获取数据。
Action 的定义： 定义 Action type 和 Action payload。

遵循这些最佳实践，可以构建更健壮和可维护的 React + Redux 应用。

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

大家都在看：

ECharts 中自定义工具箱图标的样式控制：iconStyle 属性详解在WordPress中实现PWA服务工作者按条件注册的教程 JS函数如何定义具名函数_JS具名函数定义与调试优势分析 JS注解怎么实现文档化_ JS注解生成开发文档的流程与工具使用JavaScript实现一个简单的脚手架工具_javascript Node.js