Redux-Toolkit createAsyncThunk 与 Typescript

Question

环境

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

背景

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

当我的异步工作失败时，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 最终也会变成 {{1 }} 并且您需要在继续之前检查 string | undefined 是否为 payload。

除此之外，您还需要在此处提供一个泛型 as described here in the docs：

undefined