title: Redux Toolkit - Argument of type 'AsyncThunkAction<>' is not assignable to parameter of type 'AnyAction'
body: <p>I'm moving my React / Redux application to Redux toolkit, and am following instructions given <a href="https://redux-toolkit.js.org/usage/usage-with-typescript" rel="noreferrer">here</a>.</p>
  <p>My custom selector and dispatch, as per the <a href="https://redux-toolkit.js.org/usage/usage-with-typescript#getting-the-dispatch-type" rel="noreferrer">documentation</a>.</p>
  <pre><code>import { TypedUseSelectorHook, useDispatch, useSelector } from &quot;react-redux&quot;;
  import { AppDispatch, RootState } from &quot;@/index&quot;;
  
  export const useMyDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;();
  export const useMySelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;
  </code></pre>
  <p>Type of useMyDispatch is <code>useMyDispatch(): Dispatch&lt;AnyAction&gt;</code></p>
  <p>Type <code>GETALLPAGESACTION</code> is</p>
  <pre><code>export type GETALLPAGESACTION = {
    pagesLoading?: boolean;
    pages?: PageType[] | null;
    error?: Error | null;
  }
  </code></pre>
  <p>This is my very basic action:</p>
  <pre><code>export const getAllPages = createAsyncThunk&lt;GETALLPAGESACTION, 
   string,
   { dispatch: AppDispatch; state: RootState; }&gt;(&quot;pages/getAllPages&quot;, 
     async () =&gt; {
     const pagesRes = await axios.get(&quot;___&quot;);
     if (pagesRes) {
       const finalPages: PageType[] = [];
       pagesRes.data.forEach((page: PageType) =&gt; {
       finalPages.push(page);
     });
     return { pages: finalPages, pagesLoading: false };
   }
   return { pages: [], pagesLoading: false };
  });
  </code></pre>
  <p>My store is a simple:</p>
  <pre><code>const appStore = configureStore({
    reducer: {
      pages: PagesReducer, // pagesSlice.reducer is default export
    },
  });
  export type RootState = ReturnType&lt;typeof appStore.getState&gt;;
  export type AppDispatch = typeof appStore.dispatch;
  </code></pre>
  <p>But when I try to use <code>getAllPages</code> in my component I get the above error.</p>
  <pre><code>useEffect(() =&gt; {
    dispatch(getAllPages());  // Error here 
   }, []);
  </code></pre>
  <p><code>Argument of type 'AsyncThunkAction&lt;GETALLPAGESACTION, string, { dispatch: Dispatch&lt;AnyAction&gt;; state: { pages: { pages: null; pagesLoading: boolean; }; }; }&gt;' is not assignable to parameter of type 'AnyAction'.</code></p>
  <p>I know this question has been asked several times, and I have tried adding those solutions, including trying to <a href="https://github.com/reduxjs/redux-toolkit/issues/587" rel="noreferrer">set an explicit middleware type</a>, which controls the dispatch type, but none of that has worked. From what I can understand (I'm relatively new to Typescript), the dispatch type is not being inferred correctly here?</p>
  <p>This is my slice</p>
  <pre><code>export const pagesSlice = createSlice({
    name: &quot;pages&quot;,
    initialState,
    reducers: {},
    extraReducers: {
      [getAllPages.pending]: (state, action: PayloadAction&lt;GETALLPAGESACTION&gt;) =&gt;   {
        state.pagesLoading = true;
      },
      [getAllPages.fulfilled]: (state, action: PayloadAction&lt;GETALLPAGESACTION&gt;) =&gt; {
        state.pages = action.payload.pages;
        state.pagesLoading = false;
      },
     [getAllPages.rejected]: (state, action: PayloadAction&lt;GETALLPAGESACTION&gt;) =&gt; {
        state.pagesLoading = false;
     },
   },
  });
  export default pagesSlice.reducer;
  </code></pre>
  <p>I could really use some help here, especially with an explanation of what is wrong here and what I should dig into further to understand this better. Thanks!</p>