title: Redux ToolKit: is it possible to dispatch other actions from the same slice in one action created by createAsyncThunk
body: <p>I am using <code>redux-toolkit</code> with <code>createAsyncThunk</code> to handle async requests.</p>
  <p>I have two kinds of async operations:</p>
  <ol>
  <li><p>get the data from the API server</p>
  </li>
  <li><p>update the data on the API server</p>
  </li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>export const updateData = createAsyncThunk('data/update', async (params) =&gt; {
    return await sdkClient.update({ params })
  })
  
  export const getData = createAsyncThunk('data/request', async () =&gt; {
    const { data } = await sdkClient.request()
    return data
  })
  </code></pre>
  <p>And I add them in <code>extraReducers</code> in one slice</p>
  <pre class="lang-js prettyprint-override"><code>const slice = createSlice({
    name: 'data',
    initialState,
    reducers: {},
    extraReducers: (builder: any) =&gt; {
      builder.addCase(getData.pending, (state) =&gt; {
        //...
      })
      builder.addCase(getData.rejected, (state) =&gt; {
        //...
      })
      builder.addCase(
        getData.fulfilled,
        (state, { payload }: PayloadAction&lt;{ data: any }&gt;) =&gt; {
          state.data = payload.data
        }
      )
      builder.addCase(updateData.pending, (state) =&gt; {
        //...
      })
      builder.addCase(updateData.rejected, (state) =&gt; {
        //...
      })
      builder.addCase(updateData.fulfilled, (state) =&gt; {
        //&lt;--- here I want to dispatch `getData` action to pull the updated data
      })
    },
  })
  </code></pre>
  <p>In my component, I have a button that triggers dispatching of the update action. However I found after clicking on the button, despite the fact that the data is getting updated on the server, the data on the page is not getting updated simultaneously.</p>
  <pre class="lang-js prettyprint-override"><code>function MyComponent() {
    const dispatch = useDispatch()
    const data = useSelector((state) =&gt; state.data)
  
    useEffect(() =&gt; {
      dispatch(getData())
    }, [dispatch])
  
    const handleUpdate = () =&gt; {
      dispatch(updateData())
    }
  
    return (
      &lt;div&gt;
        &lt;ul&gt;
          // data goes in here
        &lt;/ul&gt;
        &lt;button onClick={handleUpdate}&gt;update&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I tried to add <code>dispatch(getData())</code> in <code>handleUpdate</code> after updating the data. However it doesn't work because of the async thunk. I wonder if I can dispatch the <code>getData</code> action in the lifecycle action of <code>updateData</code> i.e.</p>
  <pre class="lang-js prettyprint-override"><code>builder.addCase(updateData.fulfilled, (state) =&gt; {
        dispatch(getData())//&lt;--- here I want to dispatch `getData` action to pull the updated data
      })
  </code></pre>