// Problem Description:
//I am encountering an issue where the login value in my Redux store is updating for login logout register part but loadingUser its not getting updated.Even though the in LoadUser fnction is dispatching
LoadUserSuccess but login value is not updating.
// I’ve provided my code below and would like to understand why this issue is happening.
// App.js
import ‘./App.css’;
import Login from ‘./component/LoginRegis/login’;
import Navbar from ‘./component/Navbar/navbar’;
import Footer from ‘./component/Footer/footer’;
import Book from ‘./component/Book/book’;
import { useEffect} from ‘react’;
import { useDispatch,useSelector } from “react-redux”;
import { LoadUser} from “./Action/user”
function App() {
const dispatch = useDispatch();
const isLogged = useSelector((state) => state.user.login);
console.log(isLogged);
useEffect(()=>{
dispatch(LoadUser())
},[dispatch])
return (
<div className="app">
{isLogged && < Navbar/>}
{isLogged && < Book />}
{!isLogged && < Login/>}
{isLogged &&< Footer/>}
</div>
);
}
export default App;
//Redux action file
import axios from “axios”;
export const LoginUser = (email, password) => async (dispatch) => {
try {
dispatch({
type: "LoginRequest"
})
const data = await axios.post("api/v1/login/", {email, password}, {
headers: {
"content-type": "application/json",
}
});
dispatch({
type: "LoginSuccess",
payload: data.user
})
} catch (error) {
dispatch({
type: "LoginFailure",
payload: error
})
}
};
export const RegisterUser = (userDetails) => async (dispatch) => {
try {
dispatch({
type: "RegisterRequest"
})
const data = await axios.post("api/v1/register/", {userDetails}, {
headers: {
"content-type": "application/json",
}
});
dispatch({
type: "RegisterSuccess",
payload: data.user
})
} catch (error) {
dispatch({
type: "RegisterFailure",
payload: error
})
}
};
export const LoadUser = () => async (dispatch) => {
try {
dispatch({
type: "LoadUserRequest",
});
const { data } = await axios.get("api/v1/me/");
dispatch({
type: "LoadUserSuccess",
payload: data.user,
});
} catch (error) {
dispatch({
type: "LoadUserFailure",
payload: error.response.data.message,
});
}
};
export const LogoutUser = () => async (dispatch) => {
try {
dispatch({
type: "LogoutUserRequest",
});
await axios.get("api/v1/logout/");
dispatch({
type: "LogoutUserSuccess"
});
} catch (error) {
dispatch({
type: "LogoutUserFailure",
payload: error.response.data.message,
});
}
};
//Reducer userjs
import { createReducer } from “@reduxjs/toolkit”;
const initialState={login :false}
export const userReducer = createReducer(initialState,{
RegisterRequest:(state)=>{
state.loading = true
},
RegisterSuccess:(state, action)=>{
state.loading = false
state.user = action.payload
},
RegisterFailure:(state, action)=>{
state.loading = false
state.error = action.payload
},
LoginRequest:(state)=>{
state.loading = true
state.login = false
},
LoginSuccess:(state, action)=>{
state.loading = false
state.login = true
state.user = action.payload
},
LoginFailure:(state, action)=>{
state.loading = false;
state.login = false;
state.error = action.payload
},
LoadRequest:(state)=>{
state.loading = true
},
LoadSuccess:(state, action)=>{
state.loading = false;
state.login= true;
state.user = action.payload
},
LoadFailure:(state, action)=>{
state.loading = false
state.login= false;
state.error = action.payload
},
LogoutUserRequest: (state) => {
state.loading = true;
},
LogoutUserSuccess: (state) => {
state.loading = false;
state.login = false;
state.user = null;
},
LogoutUserFailure: (state, action) => {
state.loading = false;
state.login = true;
state.error = action.payload;
},
clearErrors: (state) => {
state.error = null;
}
})
//store.js
import {configureStore}from “@reduxjs/toolkit”
import { userReducer } from “./Reducer/User”
const store =configureStore({
reducer:{ user : userReducer}
})
export default store;
i try to update in this manner
state = {
…state,
loading = false,
login = true,
user = action.payload
}
but stiil it didn’t work
