如何在多页面展示React Redux获取的接口响应数据？

注意：你当前的showUserApi里有个小问题——jsonplaceholder的/users接口直接返回用户数组，不是包含users属性的对象，所以return json.users会得到undefined，先改成return json。

1. 安装必要依赖 #

确保项目中安装Redux相关核心包：

npm install @reduxjs/toolkit react-redux

（Redux Toolkit是官方推荐的简化方案，比传统Redux写法更简洁高效）

2. 创建Redux状态管理模块 #

2.1 编写用户数据Slice #

创建features/users/userSlice.js，统一管理用户数据的异步请求和状态：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 封装异步请求逻辑
export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      return await response.json();
    } catch (error) {
      throw error;
    }
  }
);

const userSlice = createSlice({
  name: 'users',
  initialState: {
    list: [],
    status: 'idle', // 状态标识：idle/loading/succeeded/failed
    error: null
  },
  reducers: {},
  // 处理异步action的状态变化
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default userSlice.reducer;

2.2 配置全局Store #

创建app/store.js，整合所有reducer：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/users/userSlice';

export const store = configureStore({
  reducer: {
    users: userReducer
  }
});

3. 在根组件注入Store #

修改项目入口文件index.js，让整个应用能访问Redux状态：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

4. 跨组件使用共享数据 #

user.js（展示name字段） #

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from '../features/users/userSlice';

const User = () => {
  const dispatch = useDispatch();
  const { list: users, status, error } = useSelector(state => state.users);

  // 组件挂载时触发数据请求
  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUsers());
    }
  }, [dispatch, status]);

  // 处理加载/错误状态
  if (status === 'loading') return <div>加载中...</div>;
  if (status === 'failed') return <div>出错了：{error}</div>;

  return (
    <div>
      <h2>用户名称列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default User;

details.js（展示email字段） #

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from '../features/users/userSlice';

const Details = () => {
  const dispatch = useDispatch();
  const { list: users, status, error } = useSelector(state => state.users);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUsers());
    }
  }, [dispatch, status]);

  if (status === 'loading') return <div>加载中...</div>;
  if (status === 'failed') return <div>出错了：{error}</div>;

  return (
    <div>
      <h2>用户邮箱列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.email}</li>
        ))}
      </ul>
    </div>
  );
};

export default Details;

核心逻辑说明 #

• 用createAsyncThunk封装异步请求，自动生成pending/fulfilled/rejected三种状态的action，无需手动编写复杂的action类型。
• Provider组件将Redux Store注入应用全局，所有子组件都能通过useSelector获取共享状态，useDispatch触发action。
• 两个组件会自动复用已加载的状态，不会重复发起请求，实现了跨页面/组件的数据共享。

内容的提问来源于stack exchange，提问作者mark Tumuli