尝试从 Redux 商店分派中分派 Thunk。 'MyThunk' 类型的错误参数不可分配给 'AnyAction' 类型的参数

Question

我正在使用 Next.js，我有一个复杂的管理表单页面，我需要使用第二个 Redux 存储。我知道这几乎从来不需要，但我真的很喜欢 Redux 处理状态更新的方式。在我的表单中，我会有很多操作，其中一些是 async，因为有些字段是图片上传。我不想在我的全局存储中为该页面创建一个切片（处理 auth、user 和其他全局数据）。

所以我正在使用以下代码创建新的 store 它：

import { configureStore, EnhancedStore } from "@reduxjs/toolkit";
import { useMemo } from "react";
import adminBlogPostSlice from "./adminBlogPostSlice";

export const useAdminBlogPostStore = () : EnhancedStore => {

  const store = useMemo(() => {
    return configureStore({
      reducer: adminBlogPostSlice,
      devTools: false
    });
  },[]);

  return store;
};

因此，在我的页面容器中我正在做：

const AdminBlogPostContainer: React.FC<AdminBlogPostContainer> = (props) => {

  const { mode } = props;
  const { slug } = useRouter().query;

  const store = useAdminBlogPostStore();

  useEffect(() => {
    const { dispatch } = store;
    dispatch(THUNK.LOAD({mode,slug}));
  },[mode,store,slug]);

  return(
    <Provider store={store}>    // PROVIDING THE STORE TO THE REST OF THE PAGE
      <AdminBlogPostPage/>
    </Provider>
  );
};

但是我在 Thunk 调度调用中遇到错误。

这是我的 Thunk 类型。我的意思是，THUNK.LOAD（正在调度的）是 AdminBlogPostThunk

类型

type AdminBlogPostThunk = ThunkAction<
  Promise<void> | void,
  AdminBlogPostState,
  unknown,
  AnyAction
>

使用 useDispatch 挂钩似乎可以在下一级正常工作。我无法在 AdminBlogPostContainer 上使用此挂钩，因为那是添加 Provider 的地方。

我在官方文档中看到了这个页面：https://redux.js.org/recipes/usage-with-typescript#define-root-state-and-dispatch-types

我做错了什么？是否可以按照我尝试的方式使用商店？还有其他想法吗？

Answer 1

不要将挂钩声明为 returning EnhancedStore。让 TS 推断 return 类型。这样 TS 应该弄清楚“它是一个 Redux 存储，但实际上包含了 thunk 中间件”。

尝试从 Redux 商店分派中分派 Thunk。 'MyThunk' 类型的错误参数不可分配给 'AnyAction' 类型的参数

Try to dispatch a Thunk from a Redux store dispatch. Error Argument of type 'MyThunk' is not assignable to parameter of type 'AnyAction'

typescript

reactjs

redux

react-redux

redux-toolkit