问react...state新手，登录时不更新

EN

import React, { useState, useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Redirect } from 'react-router-dom'

import getAuthStatus from 'common/cyclone/auth/authenticated.status'

import {
  authenticateByLogin,
  authenticationSelector,
} from '../services/auth.service'

import Form from 'react-validation/build/form'
import Input from 'react-validation/build/input'
import CheckButton from 'react-validation/build/button'

const required = (value) => {
  if (!value) {
    return (
      <div className="alert alert-danger" role="alert">
        This field is required!
      </div>
    )
  }
}

const Login = (props) => {
  const form = useRef()
  const checkBtn = useRef()

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const [errorMessage, setErrorMessage] = useState(null)

  const dispatch = useDispatch()

  const { session, hasErrors } = useSelector(authenticationSelector)

  useEffect(() => {}, [session, hasErrors])

  const onChangeUsername = (e) => {
    const username = e.target.value
    setUsername(username)
  }

  const onChangePassword = (e) => {
    const password = e.target.value
    setPassword(password)
  }

  const handleLogin = (e) => {
    e.preventDefault()
    setLoading(true)
    form.current.validateAll()
    if (checkBtn.current.context._errors.length === 0) {
      dispatch(authenticateByLogin(username, password))
        .then(() => {
          setLoading(false)
          if (hasErrors) {
            setErrorMessage(session.error.message)
          } else {
            //props.history.push('/profile')
            // window.location.reload()
          }
        })
        .catch(() => {
          setLoading(false)
        })
    } else {
      setLoading(false)
    }
  }

  if (session.success) {
    //console.log(session.success)
    return <Redirect to="/profile" />
  }

  if (getAuthStatus()) {
    return <Redirect to="/profile" />
  }

  return (
    <div className="col-md-12">
      <div className="card card-container">
        <img
          src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
          alt="profile-img"
          className="profile-img-card"
        />

        <Form onSubmit={handleLogin} ref={form}>
          <div className="form-group">
            <label htmlFor="username">Username</label>
            <Input
              type="text"
              className="form-control"
              name="username"
              value={username}
              onChange={onChangeUsername}
              validations={[required]}
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">Password</label>
            <Input
              type="password"
              className="form-control"
              name="password"
              value={password}
              onChange={onChangePassword}
              validations={[required]}
            />
          </div>

          <div className="form-group">
            <button className="btn btn-primary btn-block" disabled={loading}>
              {loading && (
                <span className="spinner-border spinner-border-sm"></span>
              )}
              <span>Login</span>
            </button>
          </div>

          {hasErrors && (
            <div className="form-group">
              <div className="alert alert-danger" role="alert">
                {errorMessage}
              </div>
            </div>
          )}
          <CheckButton style={{ display: 'none' }} ref={checkBtn} />
        </Form>
      </div>
    </div>
  )
}

export default Login

/** Third Party Libraries */
import { createSlice } from '@reduxjs/toolkit'
import qs from 'qs'

/**Axios Wrapper...nothing fancy here*/
import CycloneAPIInstance from 'common/cyclone/api/api.client'
import CycloneConfig from 'config/base'

/** Main API Server URL */
const API_URL = CycloneConfig.API_URL

const session = JSON.parse(localStorage.getItem('authentication'))

/** Define Initial State */
export const initialState = session
  ? {
      hasErrors: false,
      session: session,
    }
  : {
      hasErrors: false,
      session: [],
    }

/** Define Slice  */
const authenticationSlice = createSlice({
  name: 'authentication',
  initialState,
  reducers: {
    authenticateUser: (state) => {
      state.hasErrors = false
    },
    authenticateUserSuccess: (state, { payload }) => {
      state.hasErrors = false
      state.session = payload
      console.log(state.session)
    },
    authenticateUserFailure: (state, { payload }) => {
      state.hasErrors = true
      state.session = payload
    },
    deauthenticateUser: (state) => {
      state.session = []
    },
  },
})

export const {
  authenticateUser,
  authenticateUserSuccess,
  authenticateUserFailure,
  deauthenticateUser,
} = authenticationSlice.actions

export const authenticationSelector = (state) => state.authentication

export default authenticationSlice.reducer

export function authenticateByLogin(user_name, user_password) {
  let requestBody = {
    user_name: user_name,
    user_password: user_password,
  }

  let config = {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  }

  return async (dispatch) => {
    dispatch(authenticateUser())

    try {
      const response = await CycloneAPIInstance.post(
        API_URL + 'auth/login',
        qs.stringify(requestBody),
        config
      )
      //console.log(response.data.content)
      localStorage.setItem('session', JSON.stringify(response.data.content))
      dispatch(authenticateUserSuccess(response.data.content))
    } catch (error) {
      //console.log(JSON.stringify(error.response.data))
      dispatch(authenticateUserFailure(error.response.data))
    }
  }
}

export function deauthenticateByLogout() {
  return async (dispatch) => {
    dispatch(deauthenticateUser())
    localStorage.removeItem('session')
  }
}