Redux Thunk仍然“履行”，即使我返回一个Promise,

mklgxw1f 于 2023-11-19 发布在其他

关注(0)|答案(2)|浏览(107)

我一直在使用Redux几次，我正在努力与Thunk的答案.
在我的切片中，我调用了一个名为“WEBoxDeliveryAsync”的函数。

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负责根据“扫描模式”（QRCode阅读器）发挥不同的功能

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”被拒绝时，“NoteBoxDeliveryAsync”仍然被认为是“已完成”。知道为什么吗？
非常感谢
我试图处理错误和承诺

redux

来源：https://stackoverflow.com/questions/77375369/redux-thunk-remains-fulfilled-even-when-i-return-a-promise-reject

2条答案

按热度按时间

vs91vp4v1#

我找到了一个解决方案！我把我的逻辑移到了“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");
      })

字符串

赞(0）回复(0）举报 2023-11-19

cgyqldqp2#

问题

handleBoxDeliveryAsync同步返回，例如解析，分派getDeliveryBoxAsync或removeDeliveryBoxAsync动作的结果，这两个动作都做自己的异步工作。当它们中的任何一个遇到任何问题并抛出/拒绝时，已经太晚了，handleBoxDeliveryAsync用另一个Promise的值解析。

解决方案

似乎你想在允许handleBoxDeliveryAsync解决之前，* 等待 * getDeliveryBoxAsync或removeDeliveryBoxAsync操作的结果解决。当使用createAsyncThunk操作时，你也不需要显式返回Promise.resolve/Promise.reject，Redux-Toolkit为你处理这个问题。
有关更多详细信息，请参见处理Thunk结果。

export const getDeliveryBoxAsync = createAppAsyncThunk(
  "collectDelivery/getBox",
  // thrown/rejected will be caught/handled in handleBoxDeliveryAsync
  (code: string) => getBox(code),
);

export const removeDeliveryBoxAsync = createAppAsyncThunk(
  "collectDelivery/removeBox",
  async (code: string, thunkApi) => {
    const { deliveryCollect: { boxes } } = thunkApi.getState();

    if (boxes.map((b) => b.external_id).includes(code)) {
      return code; // <-- fulfilled
    }
    return thunkApi.rejectWithValue(code); // <-- rejected
  }
);

export const handleBoxDeliveryAsync = createAppAsyncThunk(
  "collectDelivery/handleBox",
  async (code: string, thunkApi) => {
    const { deliveryCollect: { scanMode } } = thunkApi.getState();

    try {
      if (scanMode === "add") {
        // await & return the unwrapped result
        return await thunkApi.dispatch(getDeliveryBoxAsync(code)).unwrap();
      }
      if (scanMode === "remove") {
        // await & return the unwrapped result
        return await thunkApi.dispatch(removeDeliveryBoxAsync(code)).unwrap();
      }
    } catch (e) {
      // There was a thrown error or rejected Promise, will reject
      return thunkApi.rejectWithValue(e);
    }
  }
);

赞(0）回复(0）举报 2023-11-19

我来回答

Redux Thunk仍然“履行”，即使我返回一个Promise,

2条答案

问题

解决方案

相关问题

热门标签

最新问答