Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Argument of type '(dispatch: Dispatch<ShopDispatchTypes>) => Promise<void>' is not assignable to parameter of type 'AnyAction'

Error:

Argument of type '(dispatch: Dispatch<ShopDispatchTypes>) => Promise<void>' is not assignable to parameter of type 'AnyAction'.
useEffect(() => {
  dispatch(GetShops());
}, []);
I am trying to implement redux-thunk using Typescript. I have created simple shopping card app using react,typescript and redux-thunk but getting above issue.
Below is my code snippet’s. Feel free to ask if you need more info.
shops.actionTypes.ts
export const SHOP_LOAD_START = 'SHOP_LOAD_START';
export const SHOP_LOAD_SUCCESS = 'SHOP_LOAD_SUCCESS';
export const SHOP_LOAD_ERROR = 'SHOP_LOAD_ERROR';
export type Shop = {
 id: string;
 name: string;
export type ShopType = {
 shops: Shop[];
export interface ShopLoadStart {
 type: typeof SHOP_LOAD_START;
export interface ShopLoadError {
 type: typeof SHOP_LOAD_ERROR;
export interface ShopLoadSuccess {
 type: typeof SHOP_LOAD_SUCCESS;
 payload: ShopType;
export type ShopDispatchTypes = ShopLoadStart | ShopLoadError | ShopLoadSuccess;
shops.action.ts
export const GetShops = () => async (dispatch: Dispatch<ShopDispatchTypes>) => {
  try {
    dispatch({
      type: SHOP_LOAD_START,
    const res = await http.get('d9b45894-2549-4e34-9486-7668c2e000a0');
    dispatch({
      type: SHOP_LOAD_SUCCESS,
      payload: res.data,
  } catch (e) {
    dispatch({
      type: SHOP_LOAD_ERROR,
shops.reducer.ts
export interface IDefaultState {
  isLoading: boolean;
  shop?: ShopType;
export const defaultState: IDefaultState = {
  isLoading: false,
const shopsReducer = (
  state: IDefaultState = defaultState,
  action: ShopDispatchTypes
): IDefaultState => {
  switch (action.type) {
    case SHOP_LOAD_START:
      return {
        ...state,
        isLoading: true,
    case SHOP_LOAD_SUCCESS:
      return {
        ...state,
        isLoading: false,
        shop: action.payload,
    case SHOP_LOAD_ERROR:
      return {
        ...state,
        isLoading: false,
    default:
      return state;
export default shopsReducer;
store.ts
const Store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
export type RootStore = ReturnType<typeof rootReducer>;
export default Store;
ShoppingCard.tsx
const ShoppingCard: React.FC<IShoppingCard> = (props: IShoppingCard) => {
  const { label } = props;
  const dispatch = useDispatch();
  const shopsData = useSelector((state: RootStore) => state.shop);
  useEffect(() => {
    dispatch(GetShops()); //Getting error here
  }, []);
If I am doing anything wrong please let me know. Spent several hours for that but didn't find any solution.
GitHub: Source code link
The problem is that const dispatch = useDispatch(); only knows about the basic Dispatch type from the redux core.  That Dispatch type does not know that thunks exist - it only accepts plain action objects.  So, when you try to dispatch a thunk, it (correctly) errors.
The fix is to follow our "Usage with TS" guidelines for correctly inferring an AppDispatch type from store.dispatch, and then defining pre-typed hooks that have the thunk types baked in:
https://redux.js.org/tutorials/typescript-quick-start
Also, while it's not directly related to the question: the "hand-written" Redux patterns you're using are very outdated, and not how we want people using Redux today.  Instead, we now teach a set of "modern Redux" patterns that are much easier to learn and use - Redux Toolkit for logic + React-Redux hooks. Our official docs tutorials teach RTK+hooks as standard Redux today, but most other tutorials are very outdated.  See our official docs to learn how to use Redux Toolkit, which will drastically simplify the code you've got there:
https://redux.js.org/tutorials/index
                This is a hack that should be fixed at the Redux level. The fact is you can pass a function to dispatch, so Redux types should allow you to do that. It's perfectly valid, especially given the prevalence of thunks in the community.
– Andy Jessop
                Aug 11, 2022 at 14:41
                @AndyJessop: the core store, by itself, does not let you pass in a function. That's why the core Dispatch type does not include that. The thunk middleware has always been a separate lib. Now, yes, it's certainly used in the vast majority of Redux apps, but there are also many folks who do not use thunks (like folks who prefer sagas/observables). So, the types reflect reality here. On the other hand, RTK's configureStore sets up thunks by default,  and does a better job of inferring any modifications to dispatch than createStore does - both why we want people using RTK.
– markerikson
                Aug 12, 2022 at 1:59
                You're really missing the point here. Middleware are not built into the base createStore() call by default, therefore the types do not allow you to pass anything that is not a plain action object.  TS cannot know ahead of time that you may have called applyMiddleware(some, random, middleware, here) in your particular app and that those middleware modify how dispatch will behave.  So just because modification is possible does not mean that the base types can have any knowledge of that.
– markerikson
                Aug 22, 2022 at 16:48
                @thegreenedition you can find working example here github.com/tush241191/react-redux-example
– Tushar kharat
                Dec 13, 2022 at 10:14
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.