title: how to dispatch asyncThunk inside another asyncThunk
body: <p>I've created two async thunks:</p>
  <pre><code>export const foo = createAsyncThunk(
      'slice/foo',
      async ( ) =&gt; {
          const res = await fetch('/')
          return res.data
      }
  );
  
  export const bar = createAsyncThunk(
      'slice/bar',
      async ( ) =&gt; {
          const res = await foo()
          return res.data
      }
  );
  </code></pre>
  <p>Basically I'm trying to call <code>foo()</code> inside <code>bar()</code>
  Then in the useEffect of react component, I'm dispatching <code>bar()</code> like this:</p>
  <pre><code>React.useEffect( async () =&gt; {
      await dispatch( bar() );
  }, [bar]);
  </code></pre>
  <p><code>foo</code> being dispatched but <code>bar</code> not.</p>
  <p>What am I doing wrong?</p>
  <p>Thank you in advance.</p>
  <p>Edit1. it kinda feels like an antipattern, but what I'm basically trying to do is to chain bar() and foo(), and I don't know any other (proper?) way</p>
  <p>Edit2. based on @Nadia Chibrikova comment, and this is something I've tried as well using thunkAPI:</p>
  <pre><code>    export const bar = createAsyncThunk(
          'slice/bar',
          async ( thunkApi ) =&gt; {
              thunkApi .dispatch(foo())
          }
      );
  </code></pre>
  <p>but I'm getting the following error:</p>
  <pre><code>Cannot read property 'dispatch' of undefined
  </code></pre>