useEffect中多dispatch异步action的加载状态异常问题求助

核心问题是每个独立的异步Action单独控制加载状态，导致先完成的请求会提前把loader设为false，忽略仍在pending的请求。下面是几种实用的解决思路：

方案一：用Promise.all统一管控加载状态 #

利用Redux Thunk支持返回Promise的特性，在组件中统一发起所有请求，通过Promise.all（或Promise.allSettled）等待所有请求完成后再关闭loader。

组件代码修改（CardDetails.tsx） #

import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { GetCardNumber, GetValidity } from './actions';

const CardDetails = ({ userId }) => {
  const [loader, setLoader] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchAllData = async () => {
      setLoader(true);
      try {
        // 等待所有dispatch对应的异步请求完成
        await Promise.all([
          dispatch(GetCardNumber(userId)),
          dispatch(GetValidity(userId))
        ]);
      } catch (err) {
        // 统一处理请求错误（可选）
        console.error('数据加载失败:', err);
      } finally {
        // 无论成功失败，所有请求完成后关闭loader
        setLoader(false);
      }
    };

    fetchAllData();
  }, [userId, dispatch]);

  // 渲染逻辑...
};

Action文件修改（以GetCardNumber.action.tsx为例） #

让Thunk函数返回Promise，确保组件能正确等待请求完成：

import { GetCardNumberService } from './services';

export function GetCardNumber(id) {
  return async (dispatch) => {
    try {
      const response = await GetCardNumberService(id);
      dispatch({
        type: 'GET_CARD_NUMBER_SUCCESS',
        payload: response.data
      });
    } catch (error) {
      dispatch({
        type: 'GET_CARD_NUMBER_FAILURE',
        payload: error.message
      });
      throw error; // 抛出错误让组件的Promise.all捕获
    }
  };
}

注意：如果不想因为单个请求失败导致loader提前关闭，可以用Promise.allSettled替代Promise.all，它会等待所有请求完成（无论成功或失败）。

方案二：组件内维护请求计数 #

在组件中维护一个pending请求的计数器，每个请求开始时递增计数，结束（成功/失败）时递减计数，只要计数大于0，loader就保持开启状态。

组件代码修改 #

import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

const CardDetails = ({ userId }) => {
  const [pendingCount, setPendingCount] = useState(0);
  const dispatch = useDispatch();
  // 根据计数判断是否显示loader
  const loader = pendingCount > 0;

  // 封装计数更新函数
  const incrementPending = () => setPendingCount(prev => prev + 1);
  const decrementPending = () => setPendingCount(prev => prev - 1);

  useEffect(() => {
    dispatch(GetCardNumber(userId, incrementPending, decrementPending));
    dispatch(GetValidity(userId, incrementPending, decrementPending));
  }, [userId, dispatch]);

  // 渲染逻辑...
};

Action文件修改 #

import { GetCardNumberService } from './services';

export function GetCardNumber(id, incrementPending, decrementPending) {
  return async (dispatch) => {
    incrementPending();
    try {
      const response = await GetCardNumberService(id);
      dispatch({
        type: 'GET_CARD_NUMBER_SUCCESS',
        payload: response.data
      });
    } catch (error) {
      dispatch({
        type: 'GET_CARD_NUMBER_FAILURE',
        payload: error.message
      });
    } finally {
      // 无论请求结果如何，都要递减计数
      decrementPending();
    }
  };
}

这种方案适合组件内有动态请求（比如用户操作触发的额外请求）的场景，能灵活管控加载状态。

方案三：Redux Store统一管理全局加载状态 #

如果多个组件需要共享加载状态，或者项目有统一加载管理的需求，可以把pending请求计数放到Redux Store中，通过全局action来维护计数。

1. 创建加载状态的Action和Reducer #

// loading.actions.ts
export const INCREMENT_PENDING = 'INCREMENT_PENDING';
export const DECREMENT_PENDING = 'DECREMENT_PENDING';

export const incrementPending = () => ({ type: INCREMENT_PENDING });
export const decrementPending = () => ({ type: DECREMENT_PENDING });

// loading.reducer.ts
import { INCREMENT_PENDING, DECREMENT_PENDING } from './loading.actions';

const initialState = {
  pendingCount: 0
};

export default function loadingReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT_PENDING:
      return { ...state, pendingCount: state.pendingCount + 1 };
    case DECREMENT_PENDING:
      return { ...state, pendingCount: state.pendingCount - 1 };
    default:
      return state;
  }
}

2. 修改业务Action文件 #

import { GetCardNumberService } from './services';
import { incrementPending, decrementPending } from './loading.actions';

export function GetCardNumber(id) {
  return async (dispatch) => {
    dispatch(incrementPending());
    try {
      const response = await GetCardNumberService(id);
      dispatch({
        type: 'GET_CARD_NUMBER_SUCCESS',
        payload: response.data
      });
    } catch (error) {
      dispatch({
        type: 'GET_CARD_NUMBER_FAILURE',
        payload: error.message
      });
    } finally {
      dispatch(decrementPending());
    }
  };
}

3. 组件中获取全局加载状态 #

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const CardDetails = ({ userId }) => {
  const dispatch = useDispatch();
  // 从Redux Store获取pending计数
  const pendingCount = useSelector(state => state.loading.pendingCount);
  const loader = pendingCount > 0;

  useEffect(() => {
    dispatch(GetCardNumber(userId));
    dispatch(GetValidity(userId));
  }, [userId, dispatch]);

  // 渲染逻辑...
};

这种方案的优势是全局状态复用，适合大型项目中统一管理加载状态的场景。

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