title: Sending data to store with action, and making axios post request on same button click. Axios posts before the store data comes
body: <p>Container: Login
  Child components: => ContentBox => Form </p>
  
  <p>This is Login Container: </p>
  
  <pre><code>const mapStateToProps = state =&gt; {
      return { userCredentials: state.userLogin };
  };
  
  const Login = ( props ) =&gt; {
  
      const postLogin = ( e ) =&gt; {
          axios( {
              method: "POST",
              url: "http://localhost:8080/api/login-user",
              data: {
                  email: props.userCredentials.email,
                  password: props.userCredentials.password
              }
          } ).then( ( response ) =&gt; console.log( response ) ).catch( ( e ) =&gt; console.log( e ) );
      };
  
  
      return (
          &lt;div id={"login"}&gt;
              &lt;ContentBox submitLogin={postLogin}/&gt;
          &lt;/div&gt;
      );
  };
  
  export default connect( mapStateToProps )( Login );
  </code></pre>
  
  <p>And the Form Child Component: </p>
  
  <pre><code>const mapStateToProps = state =&gt; {
      return { stateInput: state.loginInput };
  };
  
  const Form = ( props ) =&gt; {
      const [ input, setInput ] = useState( { email: "", password: "" } );
  
      const handleEmail = ( event ) =&gt; {
          setInput( { ...input, email: event.target.value } );
      };
  
      const handlePassword = event =&gt; {
          setInput( { ...input, password: event.target.value } );
      };
  
      const submitDispatch = () =&gt; {
          store.dispatch( {
              type: "LOGIN_INPUT",
              payload: { email: input.email, password: input.password }
          } );
      };
  
      const submitForm = ( props ) =&gt; {
          props.submitLogin();
      };
  
      return (
          &lt;div className={"form"} id={"loginForm"}&gt;
              &lt;button onClick={() =&gt; store.dispatch( {
                  type: "LOGIN_INPUT",
                  payload: { email: input.email, password: input.password }
              } )}&gt;DISPATCH
              &lt;/button&gt;
              &lt;form method={"POST"}&gt;
                  &lt;input value={input.email} onChange={handleEmail} name={"email"} type="text"
                         placeholder={props.placeholder[0]}/&gt;
                  &lt;input value={input.password} onChange={handlePassword} name={"password"} type="text"
                         placeholder={props.placeholder[1]}/&gt;
  
                  &lt;button className={"submit-button"} onClick={( e ) =&gt; {
                      e.preventDefault();
                      submitDispatch();
                      submitForm( props );
  
                  }}&gt;LOGIN
                  &lt;/button&gt;
  
              &lt;/form&gt;
  
          &lt;/div&gt;
      );
  };
  
  
  export default connect( mapStateToProps )( Form );
  </code></pre>
  
  <p>And then the reducer: </p>
  
  <pre><code>const initialState = {
      userLogin: {
          email: "",
          password: ""
      }
  };
  
  function rootReducer( state = initialState, action ) {
      if ( action.type === LOGIN_INPUT ) {
          return {
              ...state,
              userLogin: {
                  email: action.payload.email,
                  password: action.payload.password
              }
          };
      }
      return state;
  }
  
  export default rootReducer;
  </code></pre>
  
  <p>Now the issue: </p>
  
  <p>In the Form Component, I have a button that triggers an action with redux, which sends what the user typed in the input fields (Email and password), this works correctly with the store, and I do receive it in the Login container in the form of props.userCredentials. </p>
  
  <p>However: In the same button, I also want to trigger the axios call to post to my node backend, to find a user. But when I do, the axios call always receives the initial state of "" in email and password, but when I log the props.userCredentials in the Form container, I do receive the new state from redux. </p>
  
  <p>I tried setting a setTimeout in the Form container and log the redux store, however then every other log I receive "", and the other log I receive the actual correct state. </p>
  
  <p>How to best achieve this set up, with the button (on the form), to have both the axios call and the send to redux store?</p>
  
  <p>The reason I have it like this is because I want the containers to make the axios calls, and the containers to not contain any JSX (easier to read), so I had to pass the axios call function down as props to the children. </p>
  
  <p>Thank you so much for your help!</p>