title: A clean way for an action to fire multiple asynchronous actions with createAsyncThunk
body: <p>We're delaying the rendering of our React-Redux web app until several asynchronous app initialization tasks in the Redux store have been completed.</p>
  <p>Here's the code that sets up the store and then fires off the initialization action:</p>
  <pre class="lang-js prettyprint-override"><code>export const setupStoreAsync = () =&gt; {
      return new Promise((resolve, reject) =&gt; {
          const store = setupStore()
          store
              .dispatch(fetchAppInitialization())
              .then(unwrapResult)
              .then(_ =&gt; resolve(store))
              .catch(e =&gt; reject(e.message))
      })
  }
  </code></pre>
  <p>The promise rejection is very important since it's used to render an error message for the user in case the app cannot be properly set up. This code is very nice to read and works wonderfully.</p>
  <p>The issue is with the action creator:</p>
  <pre class="lang-js prettyprint-override"><code>export const fetchAppInitialization = createAsyncThunk(
      'app/initialization',
      (_, thunkApi) =&gt;
          new Promise((resolve, reject) =&gt;
              Promise.all([thunkApi.dispatch(fetchVersionInfo())]).then(results =&gt; {
                  results.map(result =&gt; result.action.error &amp;&amp; reject(result.error))
              })
          )
  )
  </code></pre>
  <p>This code works beautifully. If any of these actions fail, the promise is rejected and the user sees an error message. But it's ugly - It's not as pretty as our normal action creators:</p>
  <pre class="lang-js prettyprint-override"><code>export const fetchVersionInfo = createAction('system/versionInfo', _ =&gt; ({
      payload: {
          request: { url: `/system/versionInfo` },
      },
  }))
  </code></pre>
  <p>We will at some point fire more than one fetch request in <code>fetchAppInitialization</code>, so the <code>Promise.all</code> function is definitely required. We'd love to be able to use Redux-Toolkit's <code>createAction</code> syntax to fire multiple promisified actions in order to shorten this action creator, but I have no idea if that's even possible.</p>
  <p>Note: I'm using <a href="https://github.com/klis87/redux-requests" rel="nofollow noreferrer"><code>redux-requests</code></a> to handle my axios requests.</p>
  <p>Is <code>createAsyncThunk</code> even required?</p>