为什么我必须第二次发送操作来更新 state？ Redux，反应，NodeJS，MySQL

Question

So I'm creating a User Auth login system using MySQL, Node, React and Redux.

I've created a register endpoint to insert registered users into my MySQL database.

I've then created a login endpoint to select logged in users from my MySQL database.

What my folder structure looks like

SignUpAndSignInComponent just returns my SignUp and SignIn components.

My SignUp component uses Hooks to set local state which then gets passed to my backend through my register endpoint.

My SignIn component also uses Hooks to set local state which then passed to my backend to retrieve a user from the database.

At this point I have only displayed which user is logged in but only on the SignUpAndSignIn page.

I want to be able to display the user logged in on my header, so I need to lift state up.

What I did now is I brought in Redux to manage my state and keep logged in user's state in one big store so that all components can have access to it.

My SignIn component dispatched the action to the store using useDispatch

I want to be able to take the username from the logged in user and pass it into my header component at my top-most App level.

My top-most App component uses useSelector to retrieve user logged in from the store and displays it in my header.

I managed to do this by creating my store, rootReducer, user reducer, action and types. I even persisted the state so that it's visible at the App level using redux-persist and local storage.

My issue is that when a user logs in (clicks submit button on login form) it only updates the local state and displays state on its local view.

It's only when I log in a second time that my action gets dispatched to the store so that I can view logged in user at the top level. Why is this?

Do I need to use Redux-thunk to handle this asynchronous requests? That what I think I should do but need more clarity on what the actual issue is.

here's what my redux logger middleware is posting in console

local view ie view within SignIn component

global view ie view within App.js component

SignIn Component form with dispatch

``` import React, { useState, useCallback } from 'react';
import Axios from 'axios';
import { useSelector, useDispatch } from 'react-redux';
import { setCurrentUser } from '../../redux/user/user.reducer';
import { Form, Button } from 'react-bootstrap';
import { UserActionTypes } from '../../redux/user/user.types';

const SignIn = () => {

   const dispatch = useDispatch();

   const [emailLog, setEmailLog] = useState('');
   const [passwordLog, setPasswordLog] = useState('');

   const [loginStatus, setLoginStatus] = useState('');
   
   const CallBoth = async () => {
      await login();
      isUserLoggedIn();
   }

   const login = async () => {
      await Axios.post('http://localhost:3001/login', {
         email: emailLog,
         password: passwordLog 
      }).then((response) => {
         
         if (response.data.message) {
            setLoginStatus(response.data.message);
         } else {
            setLoginStatus(response.data[0].username);
         }

      });
   }

   const isUserLoggedIn = () => {
      dispatch({type: UserActionTypes.SET_CURRENT_USER,
         payload: loginStatus
      });
   }



   window.onbeforeunload = function (e) {
      console.log(e);
      return true;
  }

      return(
         <div className="sign-in">
         <Form onSubmit={CallBoth} >
               <Form.Group controlId="formBasicEmail">
                  <Form.Label>Email address</Form.Label>
                  <Form.Control type="email" placeholder="Enter email"
                  onChange={
                     (e) => {setEmailLog(e.target.value);
                     }}
                  />
                  <Form.Text className="text-muted">
                     We'll never share your email with anyone else.
                  </Form.Text>
               </Form.Group>
   
               <Form.Group controlId="formBasicPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control type="password" placeholder="Password"
                  onChange={
                     (e) => {setPasswordLog(e.target.value);
                     }}
                  />
               </Form.Group>
               <Form.Group controlId="formBasicCheckbox">
                  <Form.Check type="checkbox" label="Check me out" />
               </Form.Group>
               <Button variant="primary" type="submit"
               
               >
                  Submit
               </Button>
           </Form>
           <h1>{loginStatus}</h1>
         </div>
      )
}

export default SignIn; ```

App.js with useSelector

```import React, { Component, useEffect } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import HomePage from './pages/homepage/homepage.component';
import SignUpAndSignIn from './pages/signupandsignin/signupandsignin.component';
import Header from './components/header/header.component';

import { useSelector, useDispatch } from 'react-redux';

function App() {

  const userLoggedIn = useSelector( (state) => state.user.currentUser);

  

  return (
    <>
    <Router>
      <Header />
      <h1>User logged in: {userLoggedIn}</h1>
      <Switch>
        <Route exact path="/" component={HomePage}>
          <HomePage />
        </Route>
        <Route path="/signupandsignin" component={SignUpAndSignIn}>
          <SignUpAndSignIn />
        </Route>
      </Switch>
    </Router>



    </>
  );
}
export default App;

Answer 1

It looks like this is due to the way you are making your async call in the login function. You have used async await but you are also using.then() Your CallBoth function is waiting for the login function to finish, but it is not waiting for the.then call to finish, so the isUserLoggedIn is dispatching the state before it gets updated - it gets caught on the second login which is why it's working after the second login attempt.

You could simply remove the CallBoth function and put the isUserLoggedIn call inside the.then after the setState call. Then the login function will be your on submit handler

EDITED

In doing so, you would not need the login function to be async await. Also, you actually won't need to set the response data to the state - you can pass it straight into isUserLoggedIn. Since you are storing the data in the redux store, you don't need to store it in the component state at all. Just use your selector to grab it from redux

You can modify your isUserLoggedIn function to accept the response data as a parameter like this:

const isUserLoggedIn = (loginStatus) => {
      dispatch({type: UserActionTypes.SET_CURRENT_USER,
         payload: loginStatus
      });
   }

then in your login function:

const login = () => {
      Axios.post('http://localhost:3001/login', {
         email: emailLog,
         password: passwordLog 
      }).then((response) => {
         
         if (response.data.message) {
            isUserLoggedIn(response.data.message);
         } else {
            isUserLoggedIn(response.data[0].username);
         }

      });
   }