即使我返回 Promise.reject，Redux Thunk 仍保持“已完成”状态

Question

我已经使用 Redux 一段时间了，但我正在努力寻找 Thunk 答案......

在我的切片中，我正在调用异步函数“handleBoxDeliveryAsync”

extraReducers: (builder) => {
    builder
        .addCase(handleBoxDeliveryAsync.fulfilled, (state, action) => {
                if (state.scanMode === "remove") {
                  return;
                }
                const payload = action?.payload?.payload as Data;
                const box = payload.data.resource;
                //If box hasn't COLLECTED status
                if (box.status !== "COLLECTED") {
                  toast.warn("Le bac de collecte n'est pas disponible à la livraison");
                  return;
                }
                //If box hasn't been scanned yet
                if (!state.boxes.find((b) => b.external_id === box.external_id)) {
                  state.boxes.push({ external_id: box.external_id, weight: 0 });
                  toast.success("Le bac a été ajouté");
                  return;
                }
                //If box has already been scanned
                toast.warn("Le bac a déjà été scanné");
              })
...

这个Thunk负责根据“scanMode”（QRCode Reader）发挥不同的功能

export const handleBoxDeliveryAsync = createAppAsyncThunk(
  "collectDelivery/handleBox",
  async (code: string, store) => {
    try {
      if (store.getState().deliveryCollect.scanMode === "add") {
        return store.dispatch(getDeliveryBoxAsync(code));
      }
      if (store.getState().deliveryCollect.scanMode === "remove") {
        return store.dispatch(removeDeliveryBoxAsync(code));
      }
    } catch (e) {
        return Promise.reject(e); // Explicitly reject the promise if an error occurs.
    }
  }
);

export const getDeliveryBoxAsync = createAppAsyncThunk(
  "collectDelivery/getBox",
  async (code: string) => {
    try {
      return await getBox(code);
    } catch (e) {
      return Promise.reject(e);
    }
  }
);

export const removeDeliveryBoxAsync = createAppAsyncThunk(
  "collectDelivery/removeBox",
  async (code: string, thunk) => {
    if (
      thunk
        .getState()
        .deliveryCollect.boxes.map((b) => b.external_id)
        .includes(code)
    ) {
      return Promise.resolve(code);
    }
    return Promise.reject(code);
  }
);

我的问题是，当“getDeliveryBoxAsync”被拒绝时，“handleBoxDeliveryAsync”仍被视为“已完成”。知道为什么吗？
非常感谢

我尝试处理错误和承诺

Answer 1

我找到了解决办法！我将逻辑移至“getDeliveryBoxAsync”

.addCase(getDeliveryBoxAsync.fulfilled, (state, { payload }) => {
        const box = payload.data.resource;
        if (box.status !== "COLLECTED") {
          toast.warn("Le bac de collecte n'est pas disponible à la livraison");
          return;
        }
        //If box hasn't been scanned yet
        if (!state.boxes.find((b) => b.external_id === box.external_id)) {
          state.boxes.push({ external_id: box.external_id, weight: 0 });
          toast.success("Le bac a été ajouté");
          return;
        }
        //If box has already been scanned
        toast.warn("Le bac a déjà été scanné");
      })
      .addCase(getDeliveryBoxAsync.rejected, (_, { error }) => {
        if (error.code === "ERR_BAD_REQUEST") {
          toast.warn("Le bac n'existe pas");
          return;
        }
        toast.warn("une erreur est survenue");
      })