关于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减速器，这对我来说看起来真的很可疑，这让我相信我对此不太理解。如果我不这样做，即使它进入了 catch，它也会通过减速器fulfilled，从而引发错误，因为这不是预期的并且没有有效负载。

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

谢谢！

Answer 1

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

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

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

在你的情况下，你应该打电话return rejectWithValue(error)。然后，在负责错误的切片中添加以下内容：

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

这是一个很好的模式，以防您处理一个切片中的错误，但可能需要知道它已在另一个切片中解决。它在两个方面也是面向未来的：你总是可以添加使用相同 thunk 的切片，并且你总是可以完全替换 thunk 而不会破坏东西（如果数据的形状不改变）。

更新

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