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