Redux-Toolkit 中基于响应状态代码的不同操作

Question

我正在尝试 Redux-Toolkit，我真的很喜欢它的简洁性，但我不知道应该如何读取服务器响应状态代码并据此分派不同的操作。例如，我正在向 API 发送注册请求

export const registerRequest = createAsyncThunk(
  'register/registerRequest',
  async (userInfo: RegisterInfo) => {
    const { firstname, lastname, email, password } = userInfo

    const { data } = await axios.post('url/users/create', {
      firstname,
      lastname,
      email,
      password,
    })
    return data
  }
)

我可能会收到不同类型的错误，但所有这些错误都由我的切片中的单个案例处理

builder.addCase(registerRequest.rejected, (state, action) => {
      state.loading = false
      state.error = action.error
    })

使用 Redux-Toolkit 检查状态代码并分派相应操作的正确方法是什么？

Answer 1

在这种情况下，您需要处理 of 中的actionCreator错误createAsyncThunk。由于您正在使用 TS，因此您需要使用 TSrejectWithValue以便实际获取错误接口的类型。TypeScript 文档的用法中有一些示例： https: //redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk。如果您有多种已知的错误响应格式，我建议为这些格式添加类型保护，并为您的减速器引入实用程序助手，因为registerRequest.rejected在使用createAsyncThunk.