title: Sending response of multiple api calls from action to view file in react js with redux
body: <p>I am beginner to React JS and Redux and have got stuck in a problem. I have to call a login api and if that return success I need to call another api using axios to get user details. Following is my function in action doing it:</p>
  <pre><code> export const login = (username, password) =&gt; (dispatch) =&gt; {
    return AuthServicee.login(username, password).then(
      (data) =&gt; {
        if(data.success) {
          userService.getUserDetails(username).then((data) =&gt; {
            localStorage.setItem(&quot;user&quot;, JSON.stringify(data.data));
            dispatch({
              type: LOGIN_SUCCESS,
              payload: { user: data },
            });
            return Promise.resolve();
          },(error) =&gt; {
            const message =
            (error.response &amp;&amp;
              error.response.data &amp;&amp;
              error.response.data.message) ||
            error.message ||
            error.toString();
    
            dispatch({
              type: LOGIN_FAIL,
            });
    
            dispatch({
              type: SET_MESSAGE,
              payload: message,
            });
    
            return Promise.reject();
          }).catch(err =&gt; {
            dispatch({
              type: LOGIN_FAIL,
            });
          });;   
        } else {
          dispatch({
            type: LOGIN_FAIL,
          });
          dispatch({
            type: SET_MESSAGE,
            payload: data.error,
          });
        }
      },
      (error) =&gt; {
        const message =
          (error.response &amp;&amp;
            error.response.data &amp;&amp;
            error.response.data.message) ||
          error.message ||
          error.toString();
  
        dispatch({
          type: LOGIN_FAIL,
        });
  
        dispatch({
          type: SET_MESSAGE,
          payload: message,
        });
  
        return Promise.reject();
      }
    );
  };
  </code></pre>
  <p>I am calling the above function from my login page as following:</p>
  <pre><code>const handleLogin = (e) =&gt; {
  e.preventDefault();
  setLoading(true);
  form.current.validateAll();
  if (checkBtn.current.context._errors.length === 0) {
    dispatch(login(username, password))
      .then(() =&gt; {
        setLoading(false);
        if (props !=null &amp;&amp; props.isAuthenticated) {
          props.history.push(&quot;/home&quot;);
        }
      })
      .catch(() =&gt; {
        setLoading(false);
      });
  } else {
    setLoading(false);
  }
  </code></pre>
  <p>};</p>
  <p>Now since I have return with the first API call, it returns data as soon as the first API provides a response and does not wait for the second call to finish. It should wait till both API calls are finished and then return the result to Login.js.
  Can someone please help me here?<br />
  <strong>Working Solution as per cb dev answer</strong></p>
  <pre><code>    const login = async (username, password) =&gt; {
        try {
          const loginRes = await loginUser(username, password);
          if (loginRes.data != null &amp;&amp; loginRes.data.success) {
            localStorage.setItem(&quot;access_token&quot;, loginRes.data.data);
            const getUserRes = await getUserDetail(loginRes.data.data, username);
            localStorage.setItem(&quot;user&quot;, JSON.stringify(getUserRes.data));
            return getUserRes.data;
          } else {
            return loginRes.data;
          }
        }catch (err) {
            console.log(&quot;Something went wrong with the login process...&quot;);
            console.log(`I can log the error here: ${err}`);
          }
      }
  function loginUser(username, password) {
    return new Promise((resolve, reject) =&gt; {
      const response = axios
      .post(API_URL + &quot;users/authenticate&quot;, {
        username,
        password,
      });
      resolve(response);
    });
  }
  
  function getUserDetail(access_token, username) {
    return new Promise((resolve, reject) =&gt; {
      console.log(`Login_step2: I've got ${access_token}...`);
      var url = apiConfig.API_BASE_URL + &quot;users?username=&quot;+username;
      resolve (axios.get(url, { headers: authHeader() }));
    });
  }
  </code></pre>