reactjs - 如何使用 Redux Toolkit(使用 TypeScript)解决“AsyncThunkAction”类型中缺少“属性”类型?
问题描述
我将 Redux Toolkit 与下面的 thunk/slice 一起使用。与其在状态中设置错误,我认为我可以使用此处提供的示例,通过等待 thunk 承诺解决来在本地处理它们。
我想我可以避免这样做,也许我应该通过error
在状态中设置一个,但我有点想了解我在哪里出错了。
Argument of type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' is not assignable to parameter of type 'Action<unknown>'.
Property 'type' is missing in type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' but required in type 'Action<unknown>'
传递resultAction
给时出现错误match
:
const onSubmit = async (data: LoginFormData) => {
const resultAction = await dispatch(performLocalLogin(data));
if (performLocalLogin.fulfilled.match(resultAction)) {
unwrapResult(resultAction)
} else {
// resultAction.payload is not available either
}
};
重击:
export const performLocalLogin = createAsyncThunk(
'auth/performLocalLogin',
async (
data: LoginFormData,
{ dispatch, requestId, getState, rejectWithValue, signal, extra }
) => {
try {
const res = await api.auth.login(data);
const { token, rememberMe } = res;
dispatch(fetchUser(token, rememberMe));
return res;
} catch (err) {
const error: AxiosError<ApiErrorResponse> = err;
if (!error || !error.response) {
throw err;
}
return rejectWithValue(error.response.data);
}
}
);
片:
const authSlice = createSlice({
name: 'auth',
initialState,
reducers: { /* ... */ },
extraReducers: builder => {
builder.addCase(performLocalLogin.pending, (state, action) => startLoading(state));
builder.addCase(performLocalLogin.rejected, (state, action) => {
//...
});
builder.addCase(performLocalLogin.fulfilled, (state, action) => {
if (action.payload) {
state.rememberMe = action.payload.rememberMe;
state.token = action.payload.token;
}
});
}
})
感谢您的任何帮助!
解决方案
很确定你在那里使用标准的内置Dispatch
类型,它对 thunk 一无所知。
根据 Redux 和 RTK 文档,您需要定义一个更具体的AppDispatch
类型,以正确了解 thunk 并声明这dispatch
是该类型,例如:
// store.ts
export type AppDispatch = typeof store.dispatch;
// MyComponent.ts
const dispatch : AppDispatch = useDispatch();
const onSubmit = async () => {
// now dispatch should recognize what the thunk actually returns
}
推荐阅读
- docker - 在 .net 核心应用程序中将 GCP 凭据添加到 docker
- xcode - 从 Unity 为移动设备构建时使用 Firebase Analytics 的 MethodAccessException
- c# - Unity2D检测多个触发冲突
- reactjs - 如何在鼠标输入的 React 中播放视频
- swiftui - 如何在 SwiftUI 的 foreach 循环中设置背景颜色
- python - 为不存在的文件创建符号链接
- reactjs - TypeError:无法读取未定义的属性“验证”
- ios - 创建一个具有已编译框架作为依赖项的 cocoapod
- json - 将 JSON 转换为 C# 对象,但 JSON 具有不同值类型的重复属性名称
- php - 如何在将数组传递给php post数据时将html输入格式化为某种格式