React-Router多路由场景下全局API数据获取的替代方案咨询

嘿，这个重复代码的问题我太熟了！之前做项目也遇到过，每个组件都写一遍“判断数据是否存在→不存在就发请求”的逻辑，简直烦死人。给你分享几个我常用的解决方案，能彻底把这些重复逻辑干掉：

方案一：自定义Hook封装（最推荐的轻量方案） #

把判断全局数据、分发action的逻辑抽成一个自定义Hook，所有需要数据的组件直接调用这个Hook就行，完全不用重复写判断逻辑。

示例代码：

import { useSelector, useDispatch } from 'react-redux';
import { fetchGlobalData } from './store/actions';
import React from 'react';

// 封装全局数据Hook
export function useGlobalData() {
  // 从store取数据和加载状态
  const globalData = useSelector(state => state.global.data);
  const isLoading = useSelector(state => state.global.isLoading);
  const dispatch = useDispatch();

  // 自动判断并请求数据
  React.useEffect(() => {
    if (!globalData) {
      dispatch(fetchGlobalData());
    }
  }, [globalData, dispatch]);

  // 返回数据和状态，供组件使用
  return { globalData, isLoading };
}

组件里使用：

import { useGlobalData } from './hooks/useGlobalData';

const HomePage = () => {
  const { globalData, isLoading } = useGlobalData();

  if (isLoading) return <div>加载中...</div>;
  
  return <div>全局数据：{globalData.someKey}</div>;
};

方案二：用RTK Query自动管理数据（Redux生态最优解） #

如果你的项目已经在用Redux Toolkit，那RTK Query绝对是最佳选择——它是Redux官方的数据获取库，自带缓存、自动重取、加载/错误状态管理，完全不用手动写“判断数据是否存在”的逻辑。

示例代码：
首先定义API切片：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const globalApi = createApi({
  reducerPath: 'globalApi', // 唯一标识这个API切片
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base-url/' }),
  endpoints: (builder) => ({
    getGlobalData: builder.query({
      query: () => 'global-constants', // 你的API接口路径
      // 可选：设置缓存时间，默认5分钟，设为Infinity就是永久缓存
      // cacheTime: Infinity,
    }),
  }),
});

// 导出自动生成的Hook
export const { useGetGlobalDataQuery } = globalApi;

然后在store里注册：

import { configureStore } from '@reduxjs/toolkit';
import { globalApi } from './api/globalApi';

export const store = configureStore({
  reducer: {
    [globalApi.reducerPath]: globalApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(globalApi.middleware),
});

组件里直接用：

import { useGetGlobalDataQuery } from './api/globalApi';

const AboutPage = () => {
  // RTK Query自动处理缓存、加载、错误
  const { data: globalData, isLoading, error } = useGetGlobalDataQuery();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error.message}</div>;

  return <div>全局配置：{globalData.configValue}</div>;
};

方案三：路由级预加载（React Router v6+） #

如果需要在路由渲染之前就拿到全局数据，可以用React Router v6的loader函数，把数据预加载逻辑放到路由配置里，每个路由复用同一个预加载函数即可。

示例代码：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { store } from './store';
import { fetchGlobalData } from './store/actions';
import Home from './pages/Home';
import About from './pages/About';

// 抽离预加载全局数据的逻辑
async function preloadGlobalData() {
  const currentData = store.getState().global.data;
  if (!currentData) {
    // 等待请求完成再渲染路由
    await store.dispatch(fetchGlobalData()).unwrap();
  }
}

// 路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    loader: preloadGlobalData, // 复用预加载函数
  },
  {
    path: '/about',
    element: <About />,
    loader: preloadGlobalData, // 复用预加载函数
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

方案四：应用初始化时预加载 #

如果这个全局数据是整个应用都必须依赖的（没有它所有页面都没法正常显示），那可以在App的入口处统一加载，等数据加载完成后再渲染路由。

示例代码：

import { useSelector, useDispatch } from 'react-redux';
import { fetchGlobalData } from './store/actions';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import React, { useEffect, useState } from 'react';

const router = createBrowserRouter([/* 你的路由配置 */]);

function App() {
  const globalData = useSelector(state => state.global.data);
  const isLoading = useSelector(state => state.global.isLoading);
  const dispatch = useDispatch();
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    async function loadInitialData() {
      if (!globalData) {
        await dispatch(fetchGlobalData()).unwrap();
      }
      setIsAppReady(true);
    }
    loadInitialData();
  }, [globalData, dispatch]);

  // 数据没加载完时显示全局loading
  if (!isAppReady || isLoading) {
    return <div>应用加载中...</div>;
  }

  return <RouterProvider router={router} />;
}

方案五：高阶组件(HOC)封装（兼容类组件） #

如果项目里还有类组件，或者习惯用HOC的方式，可以把数据逻辑封装成HOC，包裹需要数据的组件。不过现在Hooks更灵活，这个方案用得比较少了。

示例代码：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchGlobalData } from './store/actions';

// 封装HOC
export function withGlobalData(WrappedComponent) {
  return function WithGlobalData(props) {
    const globalData = useSelector(state => state.global.data);
    const isLoading = useSelector(state => state.global.isLoading);
    const dispatch = useDispatch();

    useEffect(() => {
      if (!globalData) {
        dispatch(fetchGlobalData());
      }
    }, [globalData, dispatch]);

    if (isLoading) {
      return <div>加载中...</div>;
    }

    return <WrappedComponent {...props} globalData={globalData} />;
  };
}

类组件使用：

import React from 'react';
import { withGlobalData } from './hocs/withGlobalData';

class ProfilePage extends React.Component {
  render() {
    return <div>用户配置：{this.props.globalData.userConfig}</div>;
  }
}

export default withGlobalData(ProfilePage);

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