multiple api calls through promise
First of all, putting all your code in the props of your JSX is making it unreadable. Extract this into a function, and have your JSX reference that instead.

Next, for debugging, I would recommend using breakpoints to debug code. console.log() is fine for a quick peek, but it introduces a lot of noise in the code.

Also, when you expand a logged object in the console, you see the object's structure at the time of expanding, not at the time of logging. The object's contents may have already changed between the time it was logged and when you expanded it. If you're not aware of this quirk, you'll easily think your code is broken.

For promises, you're really just mapping. Use array.map() instead of array.reduce(). For emailsMapped, which is also just a mapping operation, since you're adding multiple items, use array.flatMap() for that.

Lastly, you can modify your code so that you can chain the promises instead of nesting them. You can return the promise of axios.all() to chain it to your axios.get().

store.dispatch(dispatchFunc =&gt; {
  dispatchFunc({ type: "FETCH_DATA_START" });
  axios
    .get("https://reqres.in/api/users?page=2")
    .then(response =&gt; {
      const promises = response.data.data.map(({ id }) =&gt; {
        return axios.get(`https://.../comments?postId=${id}`)
      })

      return axios.all(promises)
    })
    .then(responses =&gt; {
      const emailsMapped = responses.flatMap(({ data }) =&gt; {
        return data.map(({ email }) =&gt; email)
      })

      dispatchFunc({
        type: "RECEIVED_DATA",
        payload: emailsMapped
      })
    })
    .catch(err =&gt; {
      dispatchFunc({
        type: "FETCH_DATA_ERROR",
        payload: err
      })
    })
})


Now that we've established a more linear flow via chaining, we can take this a bit further and convert it to an async function so that we can use await:

// Note the async here
store.dispatch(async dispatchFunc =&gt; {
  dispatchFunc({ type: "FETCH_DATA_START" });

  try {
    // Note the various await before each asynchronous function call

    const response = await axios.get("https://reqres.in/api/users?page=2")

    const promises = response.data.data.map(({ id }) =&gt; {
      return axios.get(`https://.../comments?postId=${id}`)
    })

    const responses = await axios.all(promises)

    const emailsMapped = responses.flatMap(({ data }) =&gt; {
      return data.map(({ email }) =&gt; email)
    })

    dispatchFunc({
      type: "RECEIVED_DATA",
      payload: emailsMapped
    })
  } catch (err) {
    dispatchFunc({
      type: "FETCH_DATA_ERROR",
      payload: err
    })
  }
})