“AsyncThunkAction”类型的参数<any, void, {}> ' 不可分配给 'AnyAction' 类型的参数</any,>

Question

商店.ts

export const store = configureStore({
    reducer: {
        auth: authReducer
    },
    middleware: [],
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

钩子.ts

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

authSlice.ts（导致问题的函数）

export const fetchUser = createAsyncThunk(
    'users/fetchByTok',
    async () => {
        const res = await getUser();
        return res.data;
    }
)

认证.ts

const Auth = ({ component, isLogged }: {component: any, isLogged: boolean}) => {
    const dispatch = useAppDispatch();
    
    useEffect(() => {
        dispatch(fetchUser()) // <----------- ERROR
    }, []);

    return isLogged ? component : <Navigate to='/sign-in' replace={true} />;
}

export default Auth;

我有一个获取用户的 createAsyncThunk function，但实际上我不能把它放在 dispatch() 中......

• “AsyncThunkAction<any, void, {}>”类型的参数不可分配给“AnyAction”类型的参数。
• “AsyncThunkAction<any, void, {}>”类型中缺少属性“type”，但在“AnyAction”类型中是必需的。ts(2345)

第一次使用这个，所以一个很好的解释会很好:)。

Answer 1

我遇到了同样的问题，对我来说，它只是通过将AppDispatch添加到useDispatch钩子的类型来解决的；

 const dispatch = useDispatch<AppDispatch>();

 useEffect(() => {
 
   dispatch(getUsers()); 
 }, []);

getUsers() 是我的createAsyncThunk function

Answer 2

对我来说，解决方案是更贴近 RTK 文档示例。

所以使用concat ...

const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(FooApi.middleware, apiErrorMiddleware),
  ...rest_of_the_config,
});

...而不是传播阵列...

const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    [...getDefaultMiddleware(), FooApi.middleware, apiErrorMiddleware],
  ...rest_of_the_config,
});

Answer 3

答案的store.dispatch建议通过推理更新 store.dispatch 的类型，我也更喜欢。

在这里，我想建议使用显式类型定义的替代方案，如果由于某种原因您无法通过推理解决它（这可能发生在较大的项目等中）

所以这里的想法是明确定义 redux 存储的类型，并使用支持 thunk 操作的更新调度类型。

使用显式类型声明的解决方案

// your redux store config file.
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import reducers from "./path/to/reducers";

// ... your code 

// 1. Get the root state's type from reducers
export type RootState = ReturnType<typeof reducers>;

// 2. Create a type for thunk dispatch
export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>;

// 3. Create a type for store using RootState and Thunk enabled dispatch
export type AppStore = Omit<Store<RootState, AnyAction>, "dispatch"> & {
  dispatch: AppThunkDispatch;
};

//4. create the store with your custom AppStore
export const store: AppStore = configureStore();

// you can also create some redux hooks using the above explicit types
export const useAppDispatch = () => useDispatch<AppThunkDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

使用上述方法，您还可以使用store.dispatch调度异步 thunk 操作（在编写测试时可能会有所帮助）

或使用useAppDispatch钩子

或使用老学校从react-redux connect消费者 function 。

它会在所有情况下为您提供正确的类型。

我个人大多数时候更喜欢推理类型的声明，但有时由于外部或内部原因我们别无选择。

我希望这个答案是有帮助的。 谢谢：）

Answer 4

编辑！

由于正如评论中提到的，redux 工具包实际上默认添加了 Thunk，所以 Phry 的回答更准确。 我无法删除已接受的答案，因此此编辑就足够了。

我提供的答案将删除自动添加的其他中间件！

问题是您实际上缺少存储配置中的 thunk 中间件。 只需为thunkMiddleware添加导入并将其添加到配置中的middleware数组中。 由于未添加中间件，因此调度不会接受 Thunk Action，因为 redux 开箱即用不支持它。

import thunkMiddleware from 'redux-thunk';

export const store = configureStore({
    reducer: {
        auth: authReducer
    },
    middleware: [thunkMiddleware],
});

Answer 5

如果您在node_modules的某处都有redux在版本 4.0.5 和 4.1.x 中，则会出现一个常见的 TS 问题。

对于很多人来说，卸载并重新安装react-redux或@types/react-redux似乎可以解决问题。

否则，您的捆绑器可能会帮助您找到该问题的根源（ npm ls redux或yarn why redux如果您使用这两者之一）。

Answer 6

从“redux-thunk/extend-redux”导入 * as reduxThunk；

尝试在 redux 存储配置文件或根文件 - app.js/index.js 或下一个 js - 页面目录中的 _app.js 中添加此导入语句。

例如：store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducers";
import * as reduxThunk from "redux-thunk/extend-redux";

export const store = configureStore({
    reducer: rootReducer,
});
export default store;

Answer 7

对我来说最简单的解决方案是更换：

const dispatch = useDispatch();

和：

const dispatch = useDispatch<any>();

Answer 8

您已在商店配置中将默认中间件替换为空数组。 所以，你的应用没有 redux-thunk。

你可以这样做：

const middleware = [
  ...getDefaultMiddleware(),
  /* custom middlewares */
];

然后将此数组添加到配置对象。

Answer 9

这对我有用

import {ThunkDispatch} from "@reduxjs/toolkit";

const dispatch = useDispatch<ThunkDispatch<any, any, any>>();

Answer 10

如果您没有任何中间件，请不要将其添加为空数组，只需将其删除即可。

如果你有一些中间件，你必须使用concat方法将它与默认中间件合并，比如

middleware: getDefaultMiddleware => getDefaultMiddleware().concat(yourMiddleware)

切勿使用扩展运算符来合并中间件。 Spread 运算符不会保留类型，但concat方法会。

Answer 11

对我来说这是 typescript 的问题，根据文档添加createAsyncThunk()类型解决了这个问题。 更多信息： https://redux-toolkit.js.org/api/createAsyncThunk特别是最后一部分。