gpt4 book ai didi

typescript - 使用 Typescript 的 Redux 工具包 createAsyncThunk

转载 作者:行者123 更新时间:2023-12-02 16:11:38 25 4
gpt4 key购买 nike

环境

  1. Redux 工具包
  2. react
  3. typescript
  4. Grpahql

背景

我正在使用 reduxredux-toolkit 进行本地状态管理。我阅读了 redux-toolkit 文档。我发现我们可以使用 redux-toolkit 中的 createAsyncThunk() 函数分派(dispatch) thunk Action 。此函数自动调度 pendingfulfilledrejected 操作。

当我的异步工作失败时,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 的类型是未知

如何把它改成string

最佳答案

两件事:此时,您仍然无法知道此拒绝是由未知的“抛出”还是 return rejectWithValue 引起的,因此即使您正确输入了 asyncThunk,action.payload 最终会变成 string | undefined 并且在继续之前,您需要检查 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!!");
}
});

关于typescript - 使用 Typescript 的 Redux 工具包 createAsyncThunk,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67845888/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com