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

Question

store.ts

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

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

hooks.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;
    }
)

Auth.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 函数，但实际上我无法将其放入 dispatch()...

'AsyncThunkAction<any, void, {}>' 类型的参数不能分配给 'AnyAction' 类型的参数。
属性 'type' 在类型 'AsyncThunkAction<any, void, {}>' 中缺失，但在类型 'AnyAction'.ts(2345)

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

Answer 1

编辑！

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

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

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

import thunkMiddleware from 'redux-thunk';

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

Answer 2

如果您的 redux 版本 4.0.5 和 4.1.x 都在您的 node_modules.[=16 中的某处，那么就会出现这样的常见 TS 问题=]

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

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

Answer 3

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

 const dispatch = useDispatch<AppDispatch>();

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

getUsers() 是我的 createAsyncThunk 函数

Answer 4

对我来说，解决方案是更加贴近 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,
});

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

Argument of type 'AsyncThunkAction<any, void, {}>' is not assignable to parameter of type 'AnyAction'

reactjs

react-redux

redux-thunk

redux-toolkit