title: Dispatch multiple async actions with Redux Toolkit
body: <p>I'm building an app with Expo/React Native and using Redux via Redux Toolkit to handle the store/state of the app using slices.</p>
  <p>I've been using this setup for a while without complications because my functions are simple (like user/auth, cart, category and products reducers).</p>
  <p>But for this app I need to load multiple catalogs from a single endpoint. To achieve this I have created a &quot;catalogs&quot; slice with multiple reducers and a single action which performs the requests and dispatches the reducer depending on the name of the catalog.</p>
  <pre><code>const initialState = {
    catalogOne: [],
    catalogTwo: [],
    catalogThree: [],
    catalogN: []
  }
  
  const catalogsSlice = createSlice({
    name: &quot;catalogs&quot;,
    initialState,
    reducers: {
      catalogOneRequestSucceeded: (state,action) =&gt; {
        state.catalogOne = action.payload
      },
      catalogTwoRequestSucceeded: (state,action) =&gt; {
        state.catalogTwo = action.payload
      },
      // ... and so on a reducer for each catalog
    }
  });
  </code></pre>
  <p>And then I have the following action which is used to request the endpoint with the name of the catalog and dispatch the reducer:</p>
  <pre><code>export const catalogRequest = (catalogName) =&gt; async (dispatch, getState) =&gt; {
    const state = getState();
  
    try {
      const rsp = await axios.get(`https://catalogEndpointBase/${catalogName}`, {
        headers: {
          Authorization: `Bearer ${state.user.accessToken}`,
          &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
      });
  
      switch (catalogName) {
        case &quot;catalogOne&quot;:
          dispatch(catalogOneRequestSucceeded(rsp.data));
          break;
        case &quot;catalogTwo&quot;:
          dispatch(catalogTwoRequestSucceeded(rsp.data));
          break;
        case &quot;catalogThree&quot;:
          dispatch(catalogThreeRequestSucceeded(rsp.data));
          break;
      }
  
      return rsp.data;
    } catch (e) {
      throw e;
    }
  };
  </code></pre>
  <p>So my question now is: how do I dispatch this action multiple times in an &quot;async/await&quot; way so the catalogs are loaded one after the other? and also: am I doing it the right way or is there a better approach to this kind of multiple requests?</p>
  <p>I was thinking of something like this, but I don't really know how to accomplish that:</p>
  <pre><code>  useEffect(() =&gt; {
      const loadCatalogsAsync = async() =&gt; {
        try {
          await dispatch(catalogRequest(&quot;catalogOne&quot;));
          await dispatch(catalogRequest(&quot;catalogTwo&quot;));
          await dispatch(catalogRequest(&quot;catalogThree&quot;));
          // ... and so on for all my catalogs
        } catch ( e ) {
          console.error(e);
        }
      }
  
      loadCatalogsAsync();
    }, []);
  }
  </code></pre>
  <p>The goal is to find a best-practice for kind of behavior where the app is required to fetch multiple data when the app is loaded.</p>
  <p>Thanks.</p>