title: How to use Redux-Thunk with Redux Toolkit's createSlice?
body: <p>I have come across Redux Toolkit (RTK) and wanting to implement further functionality it provides. My application dispatches to reducers slices created via the <code>createSlice({})</code> (see <a href="https://redux-toolkit.js.org/api/createSlice" rel="noreferrer">createSlice api docs</a>)</p>
  <p>This so far works brilliantly. I can easily use the built in <code>dispatch(action)</code> and <code>useSelector(selector)</code> to dispatch the actions and receive/react to the state changes well in my components.</p>
  <p>I would like to use an async call from axios to fetch data from the API and update the store as the request is A) started B) completed.</p>
  <p>I have seen <code>redux-thunk</code> and it seems as though it is designed entirely for this purpose, but the new RTK does not seem to support it within a <code>createSlice()</code> following general googling.</p>
  <p>Is the above the current state of implementing thunk with slices?</p>
  <p>I have seen in the docs that you can add <code>extraReducers</code> to the slice but unsure if this means I could create more <strong>traditional</strong> reducers that use thunk and have the slice implement them?</p>
  <p>Overall, it is misleading as the RTK docs show you can use thunk, but doesn't seem to mention it not being accessible via the new slices api.</p>
  <p>Example from <a href="https://redux-toolkit.js.org/api/getDefaultMiddleware" rel="noreferrer">Redux Tool Kit Middleware</a></p>
  <pre><code>const store = configureStore({
    reducer: rootReducer,
    middleware: [thunk, logger]
  })
  </code></pre>
  <p>My code for a slice showing where an async call would fail and some other example reducers that do work.</p>
  <pre><code>import { getAxiosInstance } from '../../conf/index';
  
  export const slice = createSlice({
      name: 'bundles',
      initialState: {
          bundles: [],
          selectedBundle: null,
          page: {
              page: 0,
              totalElements: 0,
              size: 20,
              totalPages: 0
          },
          myAsyncResponse: null
      },
  
      reducers: {
          //Update the state with the new bundles and the Spring Page object.
          recievedBundlesFromAPI: (state, bundles) =&gt; {
              console.log('Getting bundles...');
              const springPage = bundles.payload.pageable;
              state.bundles = bundles.payload.content;
              state.page = {
                  page: springPage.pageNumber,
                  size: springPage.pageSize,
                  totalElements: bundles.payload.totalElements,
                  totalPages: bundles.payload.totalPages
              };
          },
  
          //The Bundle selected by the user.
          setSelectedBundle: (state, bundle) =&gt; {
              console.log(`Selected ${bundle} `);
              state.selectedBundle = bundle;
          },
  
          //I WANT TO USE / DO AN ASYNC FUNCTION HERE...THIS FAILS.
          myAsyncInSlice: (state) =&gt; {
              getAxiosInstance()
                  .get('/')
                  .then((ok) =&gt; {
                      state.myAsyncResponse = ok.data;
                  })
                  .catch((err) =&gt; {
                      state.myAsyncResponse = 'ERROR';
                  });
          }
      }
  });
  
  export const selectBundles = (state) =&gt; state.bundles.bundles;
  export const selectedBundle = (state) =&gt; state.bundles.selectBundle;
  export const selectPage = (state) =&gt; state.bundles.page;
  export const { recievedBundlesFromAPI, setSelectedBundle, myAsyncInSlice } = slice.actions;
  export default slice.reducer;
  </code></pre>
  <p>My store setup (store config).</p>
  <pre><code>import { configureStore } from '@reduxjs/toolkit';
  import thunk from 'redux-thunk';
  
  import bundlesReducer from '../slices/bundles-slice';
  import servicesReducer from '../slices/services-slice';
  import menuReducer from '../slices/menu-slice';
  import mySliceReducer from '../slices/my-slice';
  
  const store = configureStore({
      reducer: {
          bundles: bundlesReducer,
          services: servicesReducer,
          menu: menuReducer,
          redirect: mySliceReducer
      }
  });
  export default store;
  </code></pre>