页面重载后如何等待Redux Store数据加载以渲染详情组件

核心思路：通过加载状态防护、按需请求数据两种方式，避免组件渲染时访问未就绪的Redux状态 #

1. 给详情组件增加加载状态判断，避免直接访问未定义属性

在Details组件中先检查Redux内的用户数据是否就绪，未就绪时渲染加载兜底内容，防止触发"Cannot read properties of undefined"错误：

import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

const Details = () => {
  const { userId } = useParams();
  const users = useSelector(state => state.users.list);
  const isLoading = useSelector(state => state.users.isLoading);
  const currentUser = users.find(user => user.id === userId);

  // 加载中或未找到目标用户时，显示兜底内容
  if (isLoading || !currentUser) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>{currentUser.name}</h1>
      {/* 其他用户详情内容 */}
    </div>
  );
};

2. 单独请求目标用户详情，不依赖全局用户列表加载

之前的问题根源是重载后要等待整个用户列表加载完成，改成根据路由参数直接请求单个用户的接口，数据返回更快，也无需依赖全局列表：

首先在Redux action中新增单个用户请求方法：

// actions.js
export const fetchUserById = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const res = await fetch(`/api/users/${userId}`);
    const user = await res.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
  } catch (err) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: err.message });
  }
};

然后在Details组件的useEffect中触发该请求：

import { useDispatch, useSelector } from 'react-redux';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { fetchUserById } from './actions';

const Details = () => {
  const { userId } = useParams();
  const dispatch = useDispatch();
  const currentUser = useSelector(state => state.users.currentUser);
  const isLoading = useSelector(state => state.users.isLoading);
  const error = useSelector(state => state.users.error);

  useEffect(() => {
    // 页面挂载或userId变化时，请求单个用户数据
    dispatch(fetchUserById(userId));
  }, [dispatch, userId]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;
  if (!currentUser) return <div>用户不存在</div>;

  return (
    <div>
      <h1>{currentUser.name}</h1>
      {/* 其他用户详情内容 */}
    </div>
  );
};

3. 路由层面预取数据（React Router v6+）

利用React Router的loader函数，在路由匹配完成、组件渲染前先加载数据，确保组件渲染时Redux状态已就绪：

// 路由配置文件
import { createBrowserRouter } from 'react-router-dom';
import Details from './Details';
import { fetchUserById } from './actions';
import store from './store';

const router = createBrowserRouter([
  {
    path: '/table/:userId',
    element: <Details />,
    loader: async ({ params }) => {
      // 路由匹配时提前请求用户数据
      await store.dispatch(fetchUserById(params.userId));
      return null;
    },
  },
]);

配置完成后，Details组件可直接从Redux读取数据，无需额外处理加载逻辑。

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