Redux Toolkit的isAllOf匹配工具未捕获状态变更问题求助

核心问题：isAllOf的用法理解错误 #

isAllOf的逻辑是单个action必须同时满足所有传入的匹配条件，而你的需求是"当两个异步请求都进入pending/fulfilled状态时更新状态"——这完全不是isAllOf的适用场景。

比如fetchCart.pending是一个独立的action，fetchProduct.pending是另一个独立的action，单个action不可能同时属于两个thunk的pending动作，所以isAllOf(fetchProduct.pending, fetchCart.pending)永远不会匹配任何action，自然不会触发对应的状态更新。

而isAnyOf(fetchCart.rejected, fetchProduct.rejected)能正常工作，是因为它的逻辑是"单个action满足任意一个匹配条件就触发"，只要其中一个请求失败，就能命中这个匹配器。

正确实现方式：通过计数/状态跟踪管理多请求状态 #

要实现"所有请求pending时设loading、所有请求完成时设success"的逻辑，需要跟踪请求的数量或每个请求的完成状态，以下是通用的实现方案：

// src/store/pageStatusSlice.js
import { createSlice, isAnyOf } from "@reduxjs/toolkit";
import { fetchCart } from "./cartSlice";
import { fetchProduct } from "./productSlice";

const pageStatusSlice = createSlice({
  name: "pageStatus",
  initialState: {
    isLoading: false,
    pendingCount: 0,
    success: false,
    error: false,
    // 记录每个请求是否完成
    completedRequests: {
      fetchCart: false,
      fetchProduct: false,
    },
  },
  extraReducers: (builder) => {
    builder
      // 任意请求进入pending：增加计数，开启loading
      .addMatcher(isAnyOf(fetchCart.pending, fetchProduct.pending), (state) => {
        state.pendingCount++;
        state.isLoading = true;
        state.error = false;
      })
      // 任意请求完成：减少计数，标记该请求完成
      .addMatcher(isAnyOf(fetchCart.fulfilled, fetchProduct.fulfilled), (state, action) => {
        state.pendingCount--;
        
        // 标记当前完成的请求
        if (action.type === fetchCart.fulfilled.type) {
          state.completedRequests.fetchCart = true;
        } else if (action.type === fetchProduct.fulfilled.type) {
          state.completedRequests.fetchProduct = true;
        }

        // 所有请求都完成且无 pending 时，更新状态
        if (state.pendingCount === 0 && Object.values(state.completedRequests).every(Boolean)) {
          state.isLoading = false;
          state.success = true;
        } else if (state.pendingCount === 0) {
          state.isLoading = false;
        }
      })
      // 任意请求失败：终止loading，标记错误
      .addMatcher(isAnyOf(fetchCart.rejected, fetchProduct.rejected), (state) => {
        state.pendingCount--;
        state.isLoading = false;
        state.error = true;
        state.success = false;
      });
  },
});

export default pageStatusSlice.reducer;

方案优势 #

1. 扩展性强：后续新增异步请求时，只需在isAnyOf和completedRequests中添加对应项即可
2. 状态准确：通过计数和单个请求状态跟踪，能精准判断"所有请求pending"和"所有请求完成"的场景
3. 错误处理及时：任意请求失败会立即终止loading并标记错误状态

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