title: How to wait for action to complete before redirecting in react redux?
body: <p>I'm trying to log users in based on a isLoggedin state from redux store. My Login Component dispatches the fetchLogin action from the userLogin action mapped to props. </p>
  
  <pre><code>const Login = (props) =&gt; {
      const [userLogin, setUserLogin] = useState({ email: "", password: "" })
  
      const getValue = e =&gt; {
          e.preventDefault();
          setUserLogin({
              ...userLogin,
              [e.target.name]: e.target.value 
          });
      }
  
      const makeRequest = (e) =&gt; {
          e.preventDefault()
          props.userLogin(userLogin)
  
          if (props.isLoggedin === true) {
              console.log(Cookie.get('accessToken'))
              props.history.push('/dashboard')
          }
      }
  
      return (
          &lt;Fragment&gt;
              &lt;Form onSubmit={makeRequest}&gt;
                  &lt;Form.Group controlId="formBasicEmail"&gt;
                      &lt;Form.Label&gt;Email Address&lt;/Form.Label&gt;
                      &lt;Form.Control
                          type="email"
                          name="email"
                          placeholder="Enter email"
                          onChange={getValue}
                      &gt;
                      &lt;/Form.Control&gt;
                  &lt;/Form.Group&gt;
                  &lt;Form.Group controlId="formBasicPassword"&gt;
                      &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                      &lt;Form.Control
                          type="password"
                          name="password"
                          placeholder="Enter password"
                          onChange={getValue}
                      &gt;
                      &lt;/Form.Control&gt;
  
                  &lt;/Form.Group&gt;
                  &lt;Button
                      variant="primary"
                      type="submit"
                  &gt;
                      Login
              &lt;/Button&gt;
              &lt;/Form&gt;
          &lt;/Fragment&gt;
      )
  }
  
  const mapStateToProps = (state) =&gt; ({
      isFetching: state.userReducer.isFetching,
      isLoggedin: state.userReducer.isLoggedin,
      isError: state.userReducer.isError,
      errMessage: state.userReducer.errMessage
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
      userLogin: (userLogin) =&gt; {
          dispatch(fetchLogin(userLogin))
      }
  });
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(Login)
  
  
  </code></pre>
  
  <p>The problem here is when the user clicks login, the redux action I have which takes care of logging the user in from the backend takes time and the store isn't updated fast enough for the userLogin function to confirm that the user is logged in. I understand this has something to do with promises but I'm not sure how to do it exactly. </p>
  
  <p>You can find my actions below, the only action that matters is the fetchLogin which is the one being dispatched from the login component. </p>
  
  <pre><code>export const userLoginRequest = () =&gt; {
      return {
          type: USER_LOGIN_REQUEST,
          payload: {
              isFetching: true
          }
      };
  }
  
  export const userLoginSuccess = (user) =&gt; {
      return {
          type: USER_LOGIN_SUCCESS,
          payload: {
              user: {
                  ...user
              },
              isLoggedin: true,
              isFetching: false
          }
      };
  }
  
  export const userLoginFailed = () =&gt; {
      return {
          type: USER_LOGIN_FAILED,
          payload: {
              isFetching: false,
              isError: true
          }
      };
  }
  
  export const fetchLogin = (userLogin) =&gt; dispatch =&gt; {
      dispatch(userLoginRequest())
      axios.post('/login', {
          email: userLogin.email,
          password: userLogin.password
      })
          .then(response =&gt; {
              if (response.status === 200) {
               dispatch(userLoginSuccess(response.data))
              }
          }, err =&gt; {
              console.log("Error", err)
           dispatch(userLoginFailed())
      })
  }
  </code></pre>