关于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 reducer，这对我来说真的很可疑而且它使我相信我不太了解这一点。如果我不这样做，即使它进入捕获，它也会通过 fulfilled reducer 并抛出错误，因为这不是预期的并且没有有效负载。

有什么指点吗？有没有办法，当捕获 API 调用时（如果失败）转到被拒绝的减速器而不必显式 rejectWithValue?

谢谢！

Answer 1

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


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

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

在你的情况下，你应该调用 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

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

Question about error handling in redux toolkit (rejected, fulfilled)

javascript

reactjs

redux

redux-toolkit

更新