title: Call Multiple actions one after another in the react-redux, redux-thunk
body: <p>I am totally new to the <code>react-redux</code>. I am using redux-thunk . Here, I have one login action. On that action I am calling an API which will give me some token, that I have to store in the state. Then immediately, after success of this action, I have to make another API request which will have this token in the header and will fetch more data. Based on this, I would like to redirect the user.</p>
  
  <p>so,</p>
  
  <pre><code>import { generateToken } from '../APIs/login';
  import HttpStatus from 'http-status-codes';
  import { LOGIN_FAILED, LOGIN_SUCCESS } from '../constants/AppConstants';
  import {  fetchUserJd } from './GetUserJd';
  import history from '../history';
  
  export function fetchToken(bodyjson) {
      return (dispatch) =&gt; {
          getLoginDetails(dispatch, bodyjson);
      }
  }
  
  export function getLoginDetails(dispatch, bodyjson) {
      generateToken(bodyjson)
          .then((response) =&gt; {
              if (response.status === 200)
                  dispatch(sendToken(response.payload))
              else
                  dispatch(redirectUser(response.status));
          })
  }
  
  export function sendToken(data) {
      return {
          type: LOGIN_SUCCESS,
          data: data,
      }
  }
  
  export function redirectUser(data) {
      return {
          type: LOGIN_FAILED,
          data: data,
      }
  }
  </code></pre>
  
  <p>This is my login action.</p>
  
  <pre><code>import { FETCHING_JOBDESCRIPTION_SUCCESS, FETCHING_DATA_FAILED,FETCHING_JOBS } from '../constants/AppConstants';
  import { getUserJobs } from '../APIs/GetUserJd';
  import history from '../history';
  
  export function fetchUserJd(token) {
      console.log(token);
      return (dispatch) =&gt; {
          dispatch(fetchingJobDescription());
      }
  };
  
  export function getUserJd(dispatch, token) {
      getUserJobs(token)
          .then((response) =&gt; {
              if (response.status === 200)
                  dispatch(sendUserJd(response.payload))
              else
                  dispatch(fetchFailure(response.status));
          })
  }
  
  export function fetchFailure(data) {
      return {
          type: FETCHING_DATA_FAILED,
          data: data,
      }
  }
  
  export function sendUserJd(data) {
      return {
          type: FETCHING_JOBDESCRIPTION_SUCCESS,
          data: data,
      }
  }
  
  export function fetchingJobDescription() {
      return {
          type: FETCHING_JOBS
      }
  }
  </code></pre>
  
  <p>This is my 2nd action.</p>
  
  <p>Now, </p>
  
  <pre><code>handleClick(event) {
          event.preventDefault();
          var bodyJson = {
              "username": this.state.UserName,
              "password": this.state.password
          }
          this.props.fetchToken(bodyJson);
      }
  </code></pre>
  
  <p>This is from the container will get called on click of login button.</p>
  
  <p>Now, so, how can I call the second action after a successful login request? I also want to dispatch both the actions.</p>
  
  <p>I tried -></p>
  
  <pre><code>export function getLoginDetails(dispatch, bodyjson) {
      generateToken(bodyjson)
          .then((response) =&gt; {
              if (response.status === 200)
                  dispatch(sendToken(response.payload))
                  dispatch(fetchUserJd(dispatch))
              else
                  dispatch(redirectUser(response.status));
          })
  }
  </code></pre>
  
  <p>But No luck . Can any one help me with this ?</p>