so I'm new to React redux, and having trouble using it.
So i am trying to retrieve user from reducer file and it's not being retrieved even though the reducer setup is all good or looks like it
// FollowersCard.jsx
const [persons, setPersons] = useState([]); const { user } = useSelector((state) => state.AuthReducer.authData); useEffect(() => { const fetchPersons = async () => { try { const { data } = await getAllUsers(); setPersons(data); console.log(`Fetched persons data: ${JSON.stringify((data))}`); } catch (error) { console.error("Error fetching users:", error); } }; if (user) { fetchPersons(); } }, [user]); if (!user) { return <div>Loading...</div>; } return (<div className="FollowersCard"><h3>People you may know</h3> {persons.map((person, id) => { if (person._id !== user._id) return <User person={person} key={id} />; return null; })}</div>);};here fetch person is not fetched b.c user is undefined
// AuthReducer.js
const AuthReducer = (state = { authData: null, loading: false, error: false, updateLoading: false },action) => { switch (action.type) { case "AUTH_START": return {...state, loading: true, error: false }; case "AUTH_SUCCESS": localStorage.setItem("profile", JSON.stringify({...action?.data})); return {...state, authData: action.data, loading: false, error: false }; case "AUTH_FAIL": return {...state, loading: false, error: true }; case "UPDATING_START": return {...state, updateLoading: true , error: false} case "UPDATING_SUCCESS": localStorage.setItem("profile", JSON.stringify({...action?.data})); return {...state, authData: action.data, updateLoading: false, error: false} case "UPDATING_FAIL": return {...state, updateLoading: true, error: true} case "LOG_OUT": localStorage.clear(); return {...state, authData: null, loading: false, error: false, updateLoading: false } case "FOLLOW_USER": return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following, action.data]} }} case "UNFOLLOW_USER": return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following.filter((personId)=>personId!==action.data)]} }} default: return state; }};export default AuthReducer;below is the index file for importing and exporting authReducer and another reducer
index.js
import { combineReducers } from "redux"import AuthReducer from "./AuthReducer"import PostReducer from "./PostReducer"export const reducers = combineReducers({AuthReducer, PostReducer})below is the Reduxstore.js
import { legacy_createStore as createStore, applyMiddleware, compose } from "redux";import thunk from "redux-thunk";import { reducers } from "../reducers";function saveToLocalStorage(state) { try { const serializedState = JSON.stringify(state); window.localStorage.setItem('store', serializedState); } catch (e) { console.error("Could not save state", e); }}function loadFromLocalStorage() { try { const serializedState = window.localStorage.getItem('store'); if (serializedState === null) return undefined; return JSON.parse(serializedState); } catch (e) { console.error("Could not load state", e); return undefined; }}const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const persistedState = loadFromLocalStorage();const store = createStore(reducers, persistedState, composeEnhancers(applyMiddleware(thunk)));store.subscribe(() => saveToLocalStorage(store.getState()));export default store;although in my local storage the auth Data and user is being stored, but I am having trouble in displkaying it to the frontend it is not being fetched to the frontend. Loop up the code and tell me what do u think might be wrong, if u need anything else than this,