成功登录后未更新Initialstate

Question

我刚刚学会了react redux是如何工作的。

我用express js创建了一个后端，并在前端使用了axios(身份验证(。我登录后，它只是给了我一个成功的状态。但我不明白为什么成功登录后，状态仍然像reducer中的initialStatelogin.js

import React,{ useState} from 'react'
import { connect, useDispatch } from 'react-redux'
import {login} from '../../actions/authentication'
import './auth.css' 
import LoginForm from './LoginForm'
import {Link} from 'react-router-dom'
const Login = ({history, login}) => {
const dispatch = useDispatch();
const [formData, setFormData] = useState({
email: "",
password:""
});
const hundleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value })
}
const hundleSubmit = (e) => {
e.preventDefault();
dispatch(login(formData));
history.push("/");
}
return(
<div>
<div className="forms">
<h2>Login</h2>
<LoginForm   email = {formData.email}
password = {formData.password}
hundleSubmit = {hundleSubmit}
hundleChange = {hundleChange}/>
</div>
<p>Do you not have account</p>
<Link to="/register">Sign Up</Link>
</div>
)
}
const mapStateToProps = state => (
{

auth : state.auth
}
)
export default connect (mapStateToProps, {login})(Login);

authentication.js

import axios from 'axios'
import { AUTH_FAILURE, LOGIN_USER_SUCCESS } from './types'
//login user
export const login = (formData) => async (dispatch) =>{
//formData ={email, password}
try {
const res =  await axios.post("/api/auth/login", formData)
dispatch({
type: LOGIN_USER_SUCCESS,
payload: res.data
});
console.log("here data", dispatch.payload)
} catch (error) {
console.dir(error);
const response = error.response.data;
if(Array.isArray(response)){
response.forEach((err) =>
{
alert(err.msg);
});
}
dispatch({
type: AUTH_FAILURE
});
}
}

authReducer.js

import {LOGIN_USER_SUCCESS} from '../actions'
const initialState = {
token: null,
user:null,
isLoading: false,
isAuth: false
};
export default (state = initialState, {type, payload}) => {
switch(type) {
case LOGIN_USER_SUCCESS:
return {...state,
user: payload.user,
token: payload.token,
isLoading: false,
isAuth: true

};
default:
return state;
}
};

redu_devtools1redux_devtools2

Answer 1

我找到了解决方案，问题是导入从".."导入｛LOGIN_USER_SUCCESS｝/动作/类型的

import axios from 'axios'
import {LOGIN_USER_SUCCESS} from '../actions/types'
//login user
export const login = (formData) => async (dispatch) =>{
//formData ={email, password}
try {
const res =  await axios.post("/api/auth/login", formData)
dispatch({
type: LOGIN_USER_SUCCESS,
payload: res.data
});
console.log("here data", dispatch.payload)
} catch (error) {
console.dir(error);
const response = error.response.data;
if(Array.isArray(response)){
response.forEach((err) =>
{
alert(err.msg);
});
}
dispatch({
type: AUTH_FAILURE
});
}
}