title: How to wait for an action to complete?
body: <p>I'm new to <code>react</code> and <code>redux</code> and have been exploring how it is different from <code>angular</code>. </p>
  
  <p>I'm trying to do a simple login page and am not able to achieve what I want. Once I get the username and password from a login form, I submit it like below :</p>
  
  <pre><code>  submitHandler(e){
      e.preventDefault();
      var user = {
        name : this.state.username,
        password: this.state.password
      }
      this.props.authenticateUser(user);
      browserHistory.push('/home');
      this.setState({
        username:'',
        password:''
      })
    }
  </code></pre>
  
  <p>Here, <code>authenticateUser</code> is a function inside my reducer (shown below) which checks from an already existing user's list and then the state with a property <code>isAuthenticated</code> :</p>
  
  <pre><code> case 'AUTHENTICATE_USER':
          var users = state.userslist;
          var payloadUser = action.payload;
          for (let i = 0; i &lt; users.length; i++) {
              let user = users[i]
              if (user.name === payloadUser.name) {
                  return {...state, isAuthenticated: true };
              }
          };
          return {...state, isAuthenticated: false };
  </code></pre>
  
  <p>Now in Angular, I would just wait for this call to finish and check whether this value is <code>true</code> or <code>false</code>, and navigate to the home page using <code>angular-router</code>.</p>
  
  <p>But how would I achieve the same in <code>react</code>. I am using <code>react-router</code> in my sample application.</p>
  
  <p>I tried to check <code>isAuthenticated</code> in my <code>submitHandler</code> function right below where I call <code>this.props.authenticateUser(user)</code> , but the problem is , <code>this.props.isAuthenticateUser</code> is not updated and returns <code>false</code>, which I have set as the <code>initialState</code> in my reducer. </p>
  
  <p>Please tell me how I can check <code>isAuthenticated</code> after the <code>authenticateUser</code> function has called so that I can proceed with my homepage routing. Do I have to use a <code>promise</code> and wait for the state to be updated by <code>redux</code> and then check it again ?? <em>(I know react is a one way path and it doesn't work that way.)</em></p>
  
  <p>Also if my authentication fails, how do I show an error panel below my login form. I think using a component for the error panel which takes in <code>isAuthenticated</code> as input and checking if false in order to show <em>(ie. ngShow like in Angular.)</em> But I'm afraid that will not work as well, since my state will not be updated just in time. </p>
  
  <p>I know that the render function will be called with any change in state. But I just can't wrap my head around React clearly.</p>
  
  <p><strong>Edit</strong>: For brevity, I have not provided the action creators and the full reducer above rather shown only the switch case operation for authenticate user. My app follows the original redux architecture with actions, reducers, containers, components and such. </p>
  
  <p><strong>EDIT:</strong> Github link <a href="https://github.com/V1cHu/react-redux" rel="noreferrer">here</a></p>