несколько вызовов API с обещанием, используя карту и уменьшение

метод сокращения

https://codesandbox.io/s/redux-async-actions-cltn0

метод сопоставления

https://codesandbox.io/s/redux-async-actions-i1hu1

Я нашел вашу проблему. Это происходит потому, что вы не обрабатываете результат обещания. Для этого просто добавьте функции .then() и .catch():

<FetchButton
          onFetchClick={() => {
            store.dispatch(dispatchFunc => {
              dispatchFunc({ type: "FETCH_DATA_START" });
              axios
                .get("https://reqres.in/api/users?page=2")
                // axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                  console.log("response.data.data---->", response.data.data);
                  console.log(
                    "response.data.data[0].id---->",
                    response.data.data[0].id
                  );
                  dispatchFunc({
                    type: "RECEIVED_DATA",
                    payload: response.data.data
                  });
                  let firstAPIid = response.data.data.map(obj => {
                    return obj.id;
                  });
                  console.log("firstAPIid---->", firstAPIid);
                  return new Promise((resolve, reject) => {
                    //var url = `https://jsonplaceholder.typicode.com/comments?postId=3`;
                    var url =
                      `https://jsonplaceholder.typicode.com/comments?postId=` +
                      firstAPIid;
                    //response.data.data[0].id;
                    console.log("second url---->", url);
                    axios
                      .get(url)
                      .then(response => {
                        var lFilterData = "";
                        //memberGroupingHelper.filterData(response.data, additionalParams);
                        resolve(lFilterData);
                      })
                      .catch(error => {
                        if (error.response) {
                          console.log(
                            `@@@@@@@@@@@@@@ service error from helpeeeeeer reject`
                          );
                        }
                        reject("");
                      });
                  }).then((previousResponse) => {
                    //Here you resolved the promise with the resolve value above
                    console.log(previousResponse)
                  }).catch((error) => {
                    //Here you resolved the promise with the reject value above
                    console.log(error);
                  });
                })
                .catch(err => {
                  dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err });
                });
            });
          }}
        />

Я не вижу никакого использования Promise, потому что то, чего вы хотите достичь, можно сделать только с помощью axios.

РЕДАКТИРОВАТЬ: Просто с помощью axios вы можете получить это. Измените, как показано ниже:

<FetchButton
        onFetchClick={() => {
            store.dispatch(dispatchFunc => {
              dispatchFunc({ type: "FETCH_DATA_START" });
              axios
                .get("https://reqres.in/api/users?page=2")
                // axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                  console.log("response.data.data---->", response.data.data);
                  console.log(
                    "response.data.data[0].id---->",
                    response.data.data[0].id
                  );
                  //First of all we'll create the number of requestes base on the previous Response
                  const promises = response.data.data.reduce((previousValue, { id }) => { 
                    previousValue.push(axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${id}`));
                    return previousValue;
                  },[]);
                  //We use the built in function to fetch the data
                  axios.all(promises)
                    .then((responses) => {
                      //Here you have all responses processed
                      const emailsMapped = responses.reduce((previousValue, { data }) => {
                        const emails = data.map(({ email }) => email)
                        previousValue.push(...emails);
                        return previousValue;
                      }, [])
                      //You send the emails you want  
                      dispatchFunc({
                          type: "RECEIVED_DATA",
                          payload: emailsMapped
                        });
                      console.log(emailsMapped);
                    })
                })
                .catch(err => {
                  dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err }); 
                });
            }); 
          }}
        />

Также изменяет эту строку в DataList без first_name

listItems.push(<div key={fetchedDataId++}>{elem}</div>);

Наверняка этот пустой массив является начальным значением для предыдущего значения. Эта функция выполняет итерацию по массиву, а предыдущее значение — это значение, возвращаемое в функции тела. таким образом, первая итерация предыдущего значения имеет пустой массив [], а значение {data} имеет первый элемент, который мы итерируем. как вы видите, мы нажимаем, а затем возвращаем, поэтому во второй итерации будет массив со значением данных [data], а значение {data} будет вторым значением итерации и так далее.