title: Redux state updates but component state not changing from first time
body: <p>I am developing a login/register system using Redux,Hooks and Axios the action should fetch the backend and return a session to be updated in my reducer , after that I am trying to console.log(session) from my component the first time it is {} empty 'The initial state of session' is consoled the second time it is updated , I checked my redux state and everything works good and the state is updated from the first time so not a redux issue .The problem is in my component as I need it to wait for the Redux finishing and then console.log() , I tried to setTime() but it waits for the given time and after that It console the initial state {} again.</p>
  
  <p>My code:</p>
  
  <p>Component:
  The problem is in the Redirect() function</p>
  
  <pre><code>import { LoginAction } from "../../Redux/Actions";
  import { useForm } from "react-hook-form";
  import { connect } from "react-redux";
  
  const Login = (props) =&gt; {
    let history = useHistory();
    const alert = useAlert();
  
    const { handleSubmit, register, errors } = useForm();
  
    const onSubmit = (data) =&gt; {
      const userData = {
        username: data.username.toUpperCase(),
        password: data.password,
      };
      props.login(userData);
      setTimeout(1000, Redirect());
    };
    const Redirect = () =&gt; {
      if (props.session.user) {
        console.log(props.session);
        sessionStorage.setItem("storedSession", props.session.user.username);
        history.push("/dashboard");
      } else {
        alert.show(&lt;div style={{ size: "10px" }}&gt;{props.session.error}&lt;/div&gt;);
      }
    };
    return (
      &lt;div className="login"&gt;
        &lt;div className="login-form"&gt;
          &lt;h3 className="title"&gt;Sign In&lt;/h3&gt;
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;input
              type="text"
              placeholder="Enter your username"
              name="username"
              id="username"
              ref={register({ required: true })}
            /&gt;
            {errors.username &amp;&amp; errors.username.type === "required" &amp;&amp; (
              &lt;p className="error-before-submit"&gt;This is required&lt;/p&gt;
            )}
            &lt;input
              id="password"
              placeholder="Enter your password"
              name="password"
              type="password"
              ref={register({ required: true })}
            /&gt;
            {errors.password &amp;&amp; errors.password.type === "required" &amp;&amp; (
              &lt;p className="error-before-submit"&gt;This is required&lt;/p&gt;
            )}
            &lt;input
              className="btn"
              type="submit"
              ref={register({ required: true })}
            /&gt;
            &lt;a href="/register" className="register-link"&gt;
              Create an account
            &lt;/a&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  const mapStateToProps = (state) =&gt; ({
    session: state.Session,
  });
  const mapDispatchToProps = (dispatch) =&gt; ({
    login: (user) =&gt; dispatch(LoginAction(user)),
  });
  export default connect(mapStateToProps, mapDispatchToProps)(Login);
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>
  const initialState = {
    Session: {},
  };
  
  const rootReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case Register:
        return {
          ...state,
          Session: action.payload,
        };
      case Login:
        return {
          ...state,
          Session: action.payload,
        };
      default:
        return state;
    }
  };
  export default rootReducer;
  </code></pre>
  
  <p>Action:</p>
  
  <pre><code>export function LoginAction(user) {
    return (dispatch) =&gt; {
      Axios.post(
        "/api/login",
        {
          username: user.username,
          password: user.password,
        },
        {
          headers: { "Access-Control-Allow-Origin": "*" },
          withCredentials: true,
          crossdomain: true,
        }
      ).then((res) =&gt; {
        dispatch({
          type: Login,
          payload: res.data,
        });
      });
    };
  }
  </code></pre>
  
  <p>How can I make my component take the updated state not the initial state FROM FIRST CLICK ??</p>