关于redux toolkit中错误处理的问题（rejected,fulfilled）

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