React/Redux项目中useEffect未正常dispatch action，加载动画卡住如何解决？

现有实现失效的核心原因是：组件挂载阶段useEffect会基于初始的isAnySpinnerActive状态提前执行清空操作，此时后续要触发的ShowSpinner action还未执行，导致先清空、后展示动画，最终动画无法消失。以下是三种可行的替代方案：

方案1：延迟清空+双effect拆分 #

将清空操作推入事件队列末尾，保证所有同步执行的ShowSpinner action处理完成后再执行清空，同时拆分渲染触发、状态变化触发两个独立逻辑：

// 触发时机：错误页每次渲染完成后执行
useEffect(() => {
  const clearTask = setTimeout(() => {
    dispatch(ClearAllSpinners());
  }, 0);
  return () => clearTimeout(clearTask);
}, [dispatch]);

// 触发时机：spinner活跃状态变化且组件已挂载后执行
useEffect(() => {
  const clearTask = setTimeout(() => {
    dispatch(ClearAllSpinners());
  }, 0);
  return () => clearTimeout(clearTask);
}, [dispatch, isAnySpinnerActive]);

优点是改造成本最低，无需修改项目其他逻辑，延迟执行保证不会提前清空。

方案2：Redux中间件全局自动处理 #

新增Redux中间件监听spinner相关action，仅在错误页场景下自动触发清空，无需在组件内维护逻辑：

1. 先在路由状态中新增isErrorPageActive标记，跳转至错误页时设为true，离开时设为false
2. 新增中间件逻辑：

const spinnerAutoClearMiddleware = store => next => action => {
  const result = next(action);
  const state = store.getState();
  // 错误页场景下，监听到ShowSpinner执行完成后自动触发清空
  if (state.isErrorPageActive && action.type === ShowSpinner.type) {
    setTimeout(() => store.dispatch(ClearAllSpinners()), 0);
  }
  return result;
};

优点是组件侧零耦合，后续所有错误页相关的spinner清空逻辑无需重复开发。

方案3：挂载标记避免提前触发 #

通过ref标记组件挂载状态，仅在组件完全挂载后才响应spinner状态变化触发清空：

const isMountedRef = useRef(false);

// 组件第一次挂载完成后标记，同时触发一次清空
useEffect(() => {
  isMountedRef.current = true;
  dispatch(ClearAllSpinners());
  return () => isMountedRef.current = false;
}, [dispatch]);

// 仅组件挂载完成后，才响应spinner状态变化执行清空
useEffect(() => {
  if (!isMountedRef.current) return;
  dispatch(ClearAllSpinners());
}, [dispatch, isAnySpinnerActive]);

优点是没有额外延迟，逻辑更可控，适合需要精确控制触发时机的场景。

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