React+Redux应用任意页面刷新时如何正确重新获取后端数据？

解决方案 #

方案1：根组件全局挂载请求逻辑 #

这是最直接的实现方式，你可以把数据校验和请求逻辑放在全局根组件（一般是App.jsx/App.tsx）中，该组件是所有页面的公共父组件，无论用户在哪个路径刷新页面，根组件都会优先挂载执行：

// 根组件 App.jsx
export default function App() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!data.isAvailable) {
      dispatch(fetchData());
    }
  }, [dispatch, data.isAvailable]);

  // 下方是路由渲染等原有逻辑
  return <Routes>
    <Route path="/landing" element={<Landing/>} />
    <Route path="/some" element={<SomeComponent/>} />
    <Route path="/another" element={<AnotherComponent/>} />
  </Routes>
}

配置完成后，所有业务组件都不需要再重复写请求校验逻辑，直接取Redux中的数据即可。如果你的应用所有页面都依赖这份公共数据，该方案是最优选择。

方案2：封装自定义Hook复用逻辑 #

如果只有部分页面需要用到这份数据，不想全量触发请求，可以把重复的逻辑封装成自定义Hook，需要用到数据的组件直接调用即可：

// 封装 hooks/useGlobalData.js
export function useGlobalData() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!data.isAvailable) {
      dispatch(fetchData());
    }
  }, [dispatch, data.isAvailable]);

  return data;
}

// 业务组件中使用
export default function SomeComponent() {
  const data = useGlobalData();
  // 直接使用data即可，不需要再写重复的请求逻辑
  ...
}

该方案既避免了代码重复，也可以按需触发请求，适合只有部分页面依赖公共数据的场景。

方案3：Redux 初始化时直接触发请求 #

你也可以在Redux store实例创建完成后，直接执行一次数据校验和请求逻辑，不需要依赖组件的生命周期：

// store.js 配置文件
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

// 初始化时直接检查数据状态，触发请求
const state = store.getState();
if (!state.data.isAvailable) {
  store.dispatch(fetchData());
}

export default store;

该方案和根组件方案逻辑类似，完全脱离组件生命周期执行，只要应用加载、store初始化就会触发请求。

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