React Router多组件预加载数据如何共用单个加载动画

最优方案：调整全局加载器的计数逻辑（无侵入性，适配所有并发请求场景） #

你遇到的闪烁本质是全局加载器的状态没有合并多个并行请求的生命周期：Header和页面组件的请求先后触发加载器显示、隐藏、再显示、再隐藏，最终出现闪烁。你只需要修改Redux中加载器的状态设计，将布尔值开关改为请求计数器即可：

1. 调整loading模块的Redux状态结构：

const initialState = {
  loadingCount: 0,
  isLoading: false
}

2. 改造reducer逻辑：

function loadingReducer(state = initialState, action) {
  switch (action.type) {
    case 'REQUEST_START':
      return {
        ...state,
        loadingCount: state.loadingCount + 1,
        isLoading: true
      }
    case 'REQUEST_FINISH':
      // 避免异常场景下计数出现负数
      const newCount = Math.max(state.loadingCount - 1, 0)
      return {
        ...state,
        loadingCount: newCount,
        isLoading: newCount > 0
      }
    default:
      return state
  }
}

3. 配套修改请求拦截器：

• 所有请求发出前，dispatch REQUEST_START action
• 所有请求结束（成功/失败）后，dispatch REQUEST_FINISH action

该方案完全兼容你现有路由透传的设计，不需要修改布局和路由代码，会自动合并所有并发请求的加载状态：只要还有任意一个请求未完成，加载动画就会持续显示，所有请求全部结束后才会隐藏，全程只会触发一次加载动画，完全消除闪烁。 #

可选适配方案 #

如果你的业务场景中Header加载不需要显示全局加载动画，可以直接给Header的fetch请求添加自定义标记，在请求拦截器中判断到该标记时，不触发加载器的计数更新，仅页面请求触发加载动画，同样可以解决闪烁问题。

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