javascript - 关于redux工具包中错误处理的问题(已拒绝，已完成)

Question

我正在开始使用 redux-toolkit，在阅读文档并实现一些代码后，有些东西我不太明白，或者可能我的方法是错误的，这就是我在这里问的原因。

无论如何，我有一些带有 asyncThunk 的切片，它调用 API 并根据该调用返回的值设置一些状态，如果失败，则显示错误通知和一些日志记录。我现在不在工作，所以我会写一些伪代码:

const loadData = createAsyncThunk('loadData',
    async ({ product }, { dispatch, extra: { API }, rejectWithValue }) => {
        try {
            const response = await API.getProduct(product)
            return response
        } catch (error) {
            dispatch(setErrorNotification(error.message))
            dispatch(logError(error))
            rejectWithValue(null)
        }
    }

这段代码实际上做了我想要的，但我的问题在于必须使用rejectWithValue(null)让代码通过rejected reducer ，它看起来对我来说真的很可疑，这让我相信我不太理解这一点。如果我不这样做，即使它进入 catch，它也会通过 fulfilled reducer ，该 reducer 会抛出错误，因为这不是预期的并且没有有效负载。

有什么指点吗？有没有一种方法可以在捕获 API 调用(在失败的情况下)时转到被拒绝的 reducer ，而无需显式 rejectWithValue？

谢谢!

Answer 1

一点也不腥。这是一种将所有改变状态的负担以方便的方式转移给 reducer 的方法。让我们看一下这样的代码:let Promise = PromiseReturningFunction();。这里我们有一些通用的 promise ，现在我们可以使用 then 和 catch 来“订阅”它的 future 值。我们还可以多次订阅 future 值，如下所示:

let promise = promiseReturningFunction();
promise.then(doSomething);
promise.then(doSomethingElse);

Redux 工具包保留了这种模式。 thunk 与特定切片分离，您可以在多个 reducer 中“订阅”它们。因此，当您想在不同的切片中对同一结果执行多项操作时，您将从 thunk 中获取原始数据，并在不同的切片中根据特定情况的需要处理该数据。

在您的情况下，您应该调用returnrejectWithValue(error)。然后，在导致错误的切片中添加以下内容:

extraReducers: {
  [loadData.rejected]: (state, action) => {
    // do something with error that is in action.payload
  }
}

当您处理一个切片中的错误，但可能需要知道它已在另一个切片中解决时，这是一个很好的模式。它在两个方面也是面向 future 的:您始终可以添加使用相同 thunk 的切片，并且您始终可以完全替换 thunk 而不会破坏事物(如果数据的形状不改变)。

更新

示例沙箱:https://codesandbox.io/s/fancy-cdn-d86c9?file=/src/App.js