How to access redux store in private route? - reactjs

Question

I am trying to access auth state from my redux store in private route. I can get default state but cannot get updated state from store. I have stored my current user data and token in store. I can access these value from all other components except my private route component.
I have provided some code below
AdminRoute.js
import React from "react";
import { useSelector } from "react-redux";
import { Route, Redirect } from "react-router-dom";
const AdminRoute = ({ component: Component, ...rest }) => {
const authState = useSelector((state) => state.authState);
console.log(authState.currentUser);
return (
<Route
{...rest}
render={(props) =>
authState.currentUser?.id ? (
<Component {...props} />
) : (
<Redirect to="/auth" />
)
}
/>
);
};
export default AdminRoute;
Store.js
import { configureStore } from "#reduxjs/toolkit";
import { uiReducer } from "../slices/uiSlice";
import { authReducer } from "../features/auth/authSlice";
import { userReducer } from "../features/user/userSlice";
export default configureStore({
reducer: {
uiState: uiReducer,
authState: authReducer,
userState: userReducer,
},
});
authSlice.js
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import { apiUrl } from "../../api/apiConfig";
import Axios from "axios";
import { tokenConfig } from "../../utils/tokenConfig";
export const userLogin = createAsyncThunk(
"auth/userLogin",
async (userData, { rejectWithValue, dispatch }) => {
const { email, password } = userData;
try {
const { data } = await Axios.post(`${apiUrl}/auth/login`, {
email,
password,
});
if (data) {
localStorage.setItem("token", data.token);
return data;
}
} catch (err) {
if (!err.response) {
throw err;
}
return rejectWithValue(err.response.data?.msg);
}
}
);
export const getCurrentUser = createAsyncThunk(
"auth/getCurrentUser",
async (_, { rejectWithValue, getState }) => {
try {
const { data } = await Axios.get(
`${apiUrl}/user/cUser`,
tokenConfig(getState)
);
if (data) {
return data;
}
} catch (err) {
if (!err.response) {
throw err;
}
return rejectWithValue(err.response.data?.msg);
}
}
);
const authSlice = createSlice({
name: "auth",
initialState: {
token: localStorage.getItem("token"),
isLoggedIn: false,
currentUser: null,
},
extraReducers: {
[userLogin.pending]: (state, action) => {
state.status = "loading";
},
[userLogin.fulfilled]: (state, action) => {
state.status = "success";
state.isLoggedIn = true;
state.token = action.payload.token;
},
[userLogin.rejected]: (state, action) => {
state.status = "failed";
state.error = action.payload;
},
[getCurrentUser.pending]: (state, action) => {
state.status = "loading";
},
[getCurrentUser.fulfilled]: (state, action) => {
state.status = "success";
state.currentUser = action.payload;
state.isLoggedIn = true;
},
[getCurrentUser.rejected]: (state, action) => {
state.status = "failed";
state.error = action.payload;
},
},
});
const { actions: authActions, reducer: authReducer } = authSlice;
export { authActions, authReducer };

Answer 1

It seems like your protected route should be rerendered when the redux state updates. Perhaps you could remove some of the complexity.
import React from "react";
import { useSelector } from "react-redux";
import { Route, Redirect } from "react-router-dom";
const AdminRoute = (props) => {
const authState = useSelector((state) => state.authState);
return authState.currentUser?.id ? (
<Route {...props} />
) : (
<Redirect to="/auth" />
);
};
And just ensure you render the AdminRoute like any other regular Route component.
Ex:
<AdminRoute path="/protected" component={PrivateComponent} />
<AdminRoute
path="/protected"
render={props => <PrivateComponent {...props} />}
/>
<AdminRoute path="/protected">
<PrivateComponent />
</AdminRoute>