Начальное состояние в react redux обновляется после жесткого обновления вместо нажатия кнопки

Я пытаюсь создать страницу входа, которая использует простой JWT из django rest framework для аутентификации и react js в качестве фронтенда и redux для управления состоянием. Я храню информацию о пользователе в локальном хранилище и начальное состояние обновляется из локального хранилища. Я хочу обновлять начальное состояние при нажатии на кнопку, но оно обновляется только после жесткого обновления. Все используемые файлы приведены ниже:

UserReducer.js

 import axios from 'axios'
    import {
     USER_LOGIN_SUCCESS , 
     USER_LOGIN_REQUEST , 
     USER_LOGIN_FAIL , 
     USER_LOGOUT , 
 } from '../constants/userConstants'

 export const login = (email , password ) => async(dispatch) => {
     try{
         dispatch({
             type: USER_LOGIN_REQUEST })
             const sdata = {
                 headers: {
                     'Content-type': 'application/json'
                 }
             }
             const {data} = await axios.post('/api/users/login/' , 
              { 'username': email , 'password': password} , sdata
             )
             
             localStorage.setItem('userInfo'  , JSON.stringify(data))
         

        dispatch({
            type:USER_LOGIN_SUCCESS , 
            payload:data
        })

        dispatch({
            type: USER_LOGOUT,
            payload: {}
        })

     }catch(error){
         dispatch({
             type: USER_LOGIN_FAIL,
             payload: error.response && error.response.data.detail
             ? error.response.data.detail
             : error.message,
         })
     }
 }

Store.js

import {createStore  , combineReducers , applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import {productListReducer} from './reducers/productReducers'
import { productDetailsReducer } from './reducers/productReducers'
import { cartItemReducer} from  './reducers/cartReducers'
import { userLoginReducer } from './reducers/userReducers'
 

const reducer = combineReducers({
    productList: productListReducer,
    productDetails : productDetailsReducer,
    cart: cartItemReducer , 
    loginuser: userLoginReducer,
   
   

})



const cartItemsInStorage = localStorage.getItem('cartItems') ? 
    JSON.parse(localStorage.getItem('cartItems')): []


const userInfoInStorage = localStorage.getItem('userInfo') ? 
    JSON.parse(localStorage.getItem('userInfo')): null


const initialState = {
    cart: {cartItems: cartItemsInStorage}  , 
    loginuser: {userInfo: userInfoInStorage}
}
const middleware = [thunk]
const store  = createStore
 (reducer , initialState , composeWithDevTools(applyMiddleware(...middleware)))
 

export default store

userAction.js

 import axios from 'axios'
    import {
         USER_LOGIN_SUCCESS , 
         USER_LOGIN_REQUEST , 
         USER_LOGIN_FAIL , 
         USER_LOGOUT , 
     } from '../constants/userConstants'
    
     export const login = (email , password ) => async(dispatch) => {
         try{
             dispatch({
                 type: USER_LOGIN_REQUEST })
                 const sdata = {
                     headers: {
                         'Content-type': 'application/json'
                     }
                 }
                 const {data} = await axios.post('/api/users/login/' , 
                  { 'username': email , 'password': password} , sdata
                 )
                 
                 localStorage.setItem('userInfo'  , JSON.stringify(data))
             
    
            dispatch({
                type:USER_LOGIN_SUCCESS , 
                payload:data
            })
    
            dispatch({
                type: USER_LOGOUT,
                payload: {}
            })
    
         }catch(error){
             dispatch({
                 type: USER_LOGIN_FAIL,
                 payload: error.response && error.response.data.detail
                 ? error.response.data.detail
                 : error.message,
             })
         }
     }

Loginpage.js

    import React, { useEffect ,  useState } from "react";
    import FormContainer from "../components/Form"
    import { useDispatch, useSelector } from "react-redux";
    import {Link , useNavigate } from 'react-router-dom'
    import { login } from "../actions/userAction";
    import Loader  from '../components/Loader'
    import Message  from '../components/Message'
    function LoginPage() {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const navigate = useNavigate()
      const dispatch = useDispatch()
     
      
      const loginuser  = useSelector(state => state.loginuser)
      
      const {error  , loading , userInfo} = loginuser
      
     console.log("userinfo: " , userInfo)
    
     
      const handleSubmit = (e) => {
           e.preventDefault()
           dispatch(login(email , password))
          
           
      }
    
      useEffect(() => {
        if(userInfo){
          navigate('/')
        }
      })
    
     
      return (
        <>
          <FormContainer>
           {error && <Message error = {error} />}
           {loading && <Loader />}
            <center>
              <h3 className="my-4">Login</h3>
            </center>
            <form  onSubmit={handleSubmit}>
              Email:{" "}
              <input
                type="text"
                placeholder="Enter Your email"
                className="form-control"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              password:{" "}
              <input
                type="password"
                placeholder="Enter your password"
                className="form-control"
                value = {password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <center>
                <input
                  type="submit"
                  value="Login"
                  className="btn btn-warning my-5"
                  
                />
              </center>
            </form>
            <div className="row my-3">
                  <div className="col">
                    New Customer? <Link to  = '/register' > Register</Link>
                  </div>
            </div>
          </FormContainer>
        </>
      );
    }

export default LoginPage;

Вернуться на верх