使用 Typescript 的 Redux 工具包 createAsyncThunk

Question

环境

1. Redux 工具包
2. 反应
3. 打字稿
4. Grpahql

背景

我正在使用 redux 和 redux-toolkit 进行本地状态管理。 我阅读了 redux-toolkit 文档。我发现我们可以在 redux-toolkit 中使用 createAsyncThunk() 函数调度 thunk 动作。此函数自动调度 pending、fulfilled、rejectedaction.

当我的异步工作失败时，thunk dispatch rejected action with action.error 作为 SerializedError 类型。我们可以使用 rejectWithValue() 函数自定义错误结果。像这样。

const fetchAdminPassword = createAsyncThunk('adminPassword/fetch', async (_, { rejectWithValue }) => {
  try {
    const result = await client.query<{adminPassword: string}>({ query: FETCH_ADMIN_PASSWORD });
    const { data: { adminPassword } } = result;
    return adminPassword;
  } catch (err) {
    rejectWithValue("Error!!");
  }
});



builder.addCase(fetchAdminPassword.rejected, (state, action) => {
  state.fetchError = action.payload;
  state.fetchPending = false;
})

问题

action.payload的类型是unknown。

如何将此更改为 string？

Answer 1

两件事： 此时，您仍然无法知道此拒绝是由未知的“抛出”还是 return rejectWithValue 引起的，因此即使您正确输入了 asyncThunk，action.payload 最终也会变成 [=13] =] 并且在继续之前，您需要检查 payload 是否为 undefined。

除此之外，您需要在此处提供通用名称 as described here in the docs:

const fetchAdminPassword = createAsyncThunk<
  {adminPassword: string},
  void,
  {
    rejectValue: string
  }
>('adminPassword/fetch', async (_, { rejectWithValue }) => {
  try {
    const result = await client.query<{adminPassword: string}>({ query: FETCH_ADMIN_PASSWORD });
    const { data: { adminPassword } } = result;
    return adminPassword;
  } catch (err) {
    rejectWithValue("Error!!");
  }
});