title: How can I call an async thunk in another async thunk?
body: <p>Please note that I just started learning React.
  I am currently trying to fetch data from the star wars API, specifically the one where information on the characters is stored. Fetching the people/character data from the api involves fetching from multiple apis. For example, to fetch 20 person i would have to fetch from both 'https://swapi.dev/api/people/?page=1' and 'https://swapi.dev/api/people/?page=2'. Its 82 characters in total with 10 on each page. I have successfully fetched both pages, however, certain results return another link to an api. For example, vehicles, starships, species, and homeworld all return links. So i decided to create another async thunk and call it in the first thunk where i initially gathered all the data. So currently when i call fetchDetails inside of fetchAsyncCards it doesn't work but if i remove the dispatch(fetch(details)) part then fetchAsync works perfectly and loads all the data.</p>
  <p>Here's the code :</p>
  <p>cards-slice.js :</p>
  <pre><code>import { createAsyncThunk, createSlice } from &quot;@reduxjs/toolkit&quot;;
  import axios from &quot;axios&quot;;
  
  export const fetchAsyncCards = createAsyncThunk(
      'cards/fetchAsyncCards',
      async (dispatch ) =&gt; {
          const response1 = await axios.get('https://swapi.dev/api/people/?page=1&amp;format=json');
          const response2 = await axios.get('https://swapi.dev/api/people/?page=2&amp;format=json');
          let data = [...response1.data.results, ...response2.data.results];
          let cardsData = [];
          for (const key in data) {
              cardsData.push({
                  id: parseInt(key)+1,
                  name:data[key].name,
                  gender:data[key].gender,
                  birth_year:data[key].birth_year,
                  species: dispatch(fetchDetails(data[key].species)),//tested on this but didnt work
                  homeworld:data[key].homeworld, //returns a link
                  vehicles:data[key].vehicles, //returns a link, sometimes multiple links
                  starships:data[key].starships //returns a link, sometimes multiple links
              });
          }
          console.log(cardsData);
          return cardsData;
      }
  )
  
  export const fetchDetails = createAsyncThunk(
      'cards/fetchDetails',
      async (urls) =&gt; {
          let data = []
          if(urls.length &gt; 1) {
              for(let i = 0; i &lt; urls.length; i++) {
                  let response = await axios.get(urls[i]);
                  data.push(response.data.name);
              }
              // return data;
          } 
  
          else if (urls.length === 1){
              const response = await axios.get(urls);
              data = response.data.name;
          } else {
              data = [0];
          }
          console.log('fetched single card'+ data);
          return data;
      }
  )
  
  const cardsSlice = createSlice({
      name: 'cards',
      initialState: {
          cards: [],
          status : null,
      },
      reducers : {
      },
      extraReducers : {
          [fetchAsyncCards.pending]: (state) =&gt; {
              state.status = 'pending';
          },
          [fetchAsyncCards.fulfilled]: (state, {payload}) =&gt; {
              state.cards = payload;
              state.status = 'success';
          },
          [fetchAsyncCards.rejected]: (state) =&gt; {
              state.status = 'rejected';
          },
      },
  })
  
  export const cardsActions = cardsSlice.actions;
  export const getAllCards = (state) =&gt; state.cards;
  export const getSelectedCard = (state) =&gt; state.selectedCard;
  export default cardsSlice;
  </code></pre>
  <p>store :</p>
  <pre><code>import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import authSlice from &quot;./auth-slice&quot;;
  import cardsSlice from &quot;./cards-slice&quot;;
  
  const store = configureStore({
      reducer: {
          auth: authSlice.reducer,
          cards: cardsSlice.reducer,
      }
  })
  
  export default store;
  </code></pre>
  <p>index.js :</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import { Provider } from 'react-redux';
  import store from './store';
  import './index.css';
  import App from './App';
  import { fetchAsyncCards } from './store/cards-slice';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  store.dispatch(fetchAsyncCards());
  root.render(
      &lt;React.StrictMode&gt;
          &lt;BrowserRouter&gt;
              &lt;Provider store={store}&gt;
                      &lt;App /&gt;
              &lt;/Provider&gt;
          &lt;/BrowserRouter&gt;
      &lt;/React.StrictMode&gt;
  );
  </code></pre>