React/Redux/Reach Router应用中API调用的最佳位置在哪？

这确实是React结合Redux开发时非常常见的痛点——既要保证数据在需要时能被正确加载，又要避免不必要的重复请求。我来分享几个业界广泛认可的解决方案，你可以根据项目的具体情况选择：

1. 封装带缓存检查的Redux Action Creator #

核心思路是把“检查数据是否存在+请求数据”的逻辑封装到Redux的Action里，让需要数据的组件统一调用这个Action，无需自己判断。

比如先写一个带缓存判断的异步Action（以Redux Thunk为例）：

// actions/sharedData.js
export const fetchSharedData = () => async (dispatch, getState) => {
  // 从store获取当前数据，判断是否存在/有效
  const { sharedData } = getState();
  if (!sharedData || sharedData.isExpired) {
    // 发起请求前可以先dispatch一个加载状态
    dispatch({ type: 'SHARED_DATA_LOADING' });
    try {
      const response = await fetch('/api/shared-data');
      const data = await response.json();
      dispatch({ 
        type: 'SET_SHARED_DATA', 
        payload: { ...data, isExpired: false } 
      });
    } catch (err) {
      dispatch({ type: 'SHARED_DATA_ERROR', payload: err.message });
    }
  }
};

然后在需要数据的组件里调用这个Action：

// PageOne.jsx
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSharedData } from '../actions/sharedData';

function PageOne() {
  const dispatch = useDispatch();
  const { sharedData, isLoading, error } = useSelector(state => state.shared);

  useEffect(() => {
    dispatch(fetchSharedData());
  }, [dispatch]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;
  
  return <div>展示数据：{sharedData.content}</div>;
}

// PageTwo.jsx
// 完全复用相同的逻辑，无需额外处理
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSharedData } from '../actions/sharedData';

function PageTwo() {
  const dispatch = useDispatch();
  const { sharedData, isLoading, error } = useSelector(state => state.shared);

  useEffect(() => {
    dispatch(fetchSharedData());
  }, [dispatch]);

  // 渲染逻辑和PageOne类似
}

这样不管用户从哪个页面进入，只要store里没有有效数据就会发起请求，反之则直接复用已有数据，完美避免重复请求。

2. 利用React Router v6+的Loader函数做路由级预加载 #

如果你的项目用的是React Router v6及以上版本，推荐使用路由的loader功能——它会在路由匹配完成、组件渲染之前执行数据加载逻辑，还会自动缓存请求结果。

首先在路由配置中定义loader：

// router.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { store } from './store';
import { fetchSharedData } from './actions/sharedData';
import PageOne from './pages/PageOne';
import PageTwo from './pages/PageTwo';

const router = createBrowserRouter([
  {
    path: '/page-one',
    element: <PageOne />,
    loader: async () => {
      const state = store.getState();
      if (!state.shared.sharedData) {
        await store.dispatch(fetchSharedData());
      }
      return state.shared.sharedData;
    }
  },
  {
    path: '/page-two',
    element: <PageTwo />,
    loader: async () => {
      const state = store.getState();
      if (!state.shared.sharedData) {
        await store.dispatch(fetchSharedData());
      }
      return state.shared.sharedData;
    }
  }
]);

// 然后在根组件中挂载RouterProvider
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

之后在组件里通过useLoaderData获取数据：

// PageTwo.jsx
import { useLoaderData } from 'react-router-dom';

function PageTwo() {
  const sharedData = useLoaderData();
  
  return <div>PageTwo展示数据：{sharedData.content}</div>;
}

这种方式的优势是数据在组件渲染前就准备完毕，不会出现组件挂载后再加载导致的内容闪烁，而且路由层面统一管理数据依赖，逻辑更清晰。

3. 封装自定义Hook复用逻辑 #

如果不想把逻辑耦合到Redux Action或路由里，可以把数据检查、请求、状态管理的逻辑封装成一个自定义Hook，让所有需要该数据的组件直接复用：

// hooks/useSharedData.js
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSharedData } from '../actions/sharedData';

export function useSharedData() {
  const dispatch = useDispatch();
  const { sharedData, isLoading, error } = useSelector(state => state.shared);

  useEffect(() => {
    if (!sharedData) {
      dispatch(fetchSharedData());
    }
  }, [dispatch, sharedData]);

  return { sharedData, isLoading, error };
}

然后在组件里直接使用这个Hook：

// PageOne.jsx
import { useSharedData } from '../hooks/useSharedData';

function PageOne() {
  const { sharedData, isLoading, error } = useSharedData();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;
  
  return <div>PageOne展示数据：{sharedData.content}</div>;
}

这种方式最灵活，完全和路由、Redux解耦，只要是需要该数据的组件，一行代码就能获取到数据和对应的状态。

总结 #

• 如果用React Router v6+，优先选择路由Loader方案，体验最优；
• 追求逻辑集中管理，选带缓存的Redux Action方案；
• 想要最大程度复用代码、降低耦合，选自定义Hook方案。

这三种方案都能完美解决你遇到的“直接访问/刷新页面数据缺失”和“重复请求”的问题，根据你的项目技术栈和团队习惯选就行。

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