javascript - Redux Toolkit - 'AsyncThunkAction<>' 类型的参数不可分配给 'AnyAction' 类型的参数
问题描述
我正在将我的 React / Redux 应用程序移动到 Redux 工具包,并按照此处给出的说明进行操作。
根据文档,我的自定义选择器和调度。
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/index";
export const useMyDispatch = () => useDispatch<AppDispatch>();
export const useMySelector: TypedUseSelectorHook<RootState> = useSelector;
useMyDispatch 的类型是useMyDispatch(): Dispatch<AnyAction>
类型GETALLPAGESACTION
是
export type GETALLPAGESACTION = {
pagesLoading?: boolean;
pages?: PageType[] | null;
error?: Error | null;
}
这是我非常基本的动作:
export const getAllPages = createAsyncThunk<GETALLPAGESACTION,
string,
{ dispatch: AppDispatch; state: RootState; }>("pages/getAllPages",
async () => {
const pagesRes = await axios.get("___");
if (pagesRes) {
const finalPages: PageType[] = [];
pagesRes.data.forEach((page: PageType) => {
finalPages.push(page);
});
return { pages: finalPages, pagesLoading: false };
}
return { pages: [], pagesLoading: false };
});
我的商店很简单:
const appStore = configureStore({
reducer: {
pages: PagesReducer, // pagesSlice.reducer is default export
},
});
export type RootState = ReturnType<typeof appStore.getState>;
export type AppDispatch = typeof appStore.dispatch;
但是当我尝试getAllPages
在我的组件中使用时,我得到了上述错误。
useEffect(() => {
dispatch(getAllPages()); // Error here
}, []);
Argument of type 'AsyncThunkAction<GETALLPAGESACTION, string, { dispatch: Dispatch<AnyAction>; state: { pages: { pages: null; pagesLoading: boolean; }; }; }>' is not assignable to parameter of type 'AnyAction'.
我知道这个问题已经被问过好几次了,我已经尝试添加这些解决方案,包括尝试设置一个显式的中间件类型,它控制调度类型,但这些都没有奏效。据我所知(我对 Typescript 比较陌生),这里没有正确推断出调度类型?
这是我的切片
export const pagesSlice = createSlice({
name: "pages",
initialState,
reducers: {},
extraReducers: {
[getAllPages.pending]: (state, action: PayloadAction<GETALLPAGESACTION>) => {
state.pagesLoading = true;
},
[getAllPages.fulfilled]: (state, action: PayloadAction<GETALLPAGESACTION>) => {
state.pages = action.payload.pages;
state.pagesLoading = false;
},
[getAllPages.rejected]: (state, action: PayloadAction<GETALLPAGESACTION>) => {
state.pagesLoading = false;
},
},
});
export default pagesSlice.reducer;
我真的可以在这里使用一些帮助,尤其是解释这里出了什么问题以及我应该进一步深入了解以更好地理解这一点。谢谢!
解决方案
大多数情况下,这只是一个错误,由 Redux 4.0.5 和 Redux 4.1.0/4.1.1 都安装在您的node_modules
.
大多数情况下,这可以通过重新安装react-redux
和@types/react-redux
来解决@reduxjs/toolkit
。
如果您使用的是 yarn,您也可以运行yarn why redux
它,它会列出所有已安装的版本以及安装它们的原因。
推荐阅读
- php - Mysql 密码问题:驱动发生异常:SQLSTATE[HY000] [2006] MySQL server has gone away
- twitter-bootstrap - Bootstrap 选择在页面刷新时添加剩余空间
- javascript - 过滤器不返回索引值javascript
- python - 我想在python中以字典的形式显示一列Excel
- java - 是否有任何允许“静态容量”的java集合?
- python - 无法在短轴上定位项目
- apache - (Apache) 访问子域时禁止 403
- ios - IOS 11 相机标签未以本地电话语言显示
- cuda - CUDA中常量内存的配置和映射
- python - 如果我已经将模型作为泡菜,为什么我需要在 docker 容器中使用 sklearn?