In my React app, why isn't this Redux reducer executed? - reactjs

Question

Good afternoon,
After doing the React tutorial, and read all the React guides, I did the Redux tutorial to re-write my working auth component to use Redux instead of component state (I also switched from classes to functional components).
My Redux setup is as follow :
import { createSlice } from '#reduxjs/toolkit';
const sessionInitialState = {
authToken: null,
userLogin: null,
};
export const sessionSlice = createSlice({
name: 'session',
initialState: {
value: sessionInitialState,
},
reducers: {
sessionRegister: (state, action) => {
console.log("Storing:")
console.log(action.payload)
state.value = action.payload;
},
sessionDestroy: state => {
console.log("Destroying session")
state.value = sessionInitialState;
localStorage.removeItem("sessionData");
},
},
});
export const { sessionRegister, sessionDestroy } = sessionSlice.actions;
export const selectSession = state => state.session.value;
export default sessionSlice.reducer;
In my login component, I store the auth token and the username as follow :
// [...]
import { useDispatch } from 'react-redux';
import { sessionRegister } from './SessionSlice';
// [...]
function LoginForm(props) {
const dispatch = useDispatch();
function onFormSubmit(event) {
// [...] This is when API response code is 200:
let sessionData = {
authToken: response.data.token,
userLogin: userName,
}
localStorage.setItem("sessionData", JSON.stringify(sessionData));
console.log("Stored:" + localStorage.getItem("sessionData"));
setApiError(null);
dispatch(sessionRegister(sessionData));
And my App component displays the login form if no data is stored in Redux, or the user name and token if they're present :
function App(props) {
const sessionData = useSelector(selectSession);
const storedSessionData = localStorage.getItem("sessionData");
if (storedSessionData && !sessionData.authToken) {
console.log("App init check. Storing :");
console.log(JSON.parse(storedSessionData));
sessionRegister(JSON.parse(storedSessionData));
} else {
if (!storedSessionData) console.log("No sessionData and no stored data");
}
return (
<div className="App">
<div className="topbar"><Topbar /></div>
<div className="content">
{sessionData.authToken ? (
<span>User: {sessionData.userLogin} {storedSessionData}</span>
) : (
<LoginForm />
)
}
</div>
</div>
);
}
All this almost works. The login component stores the data via Redux after the API call, and in localStorage too. The userLogin from Redux is displayed by the App, and the localStorage content too. But if I refresh the page, the App gets the data from locaStorage but sessionRegister is not called (or does nothing).
It happens as follow :
Fisrt open of the page. Console: No sessionData and no stored data
Login via LoginForm. Console:
Localy stored:{"authToken":"5467c25e000df49a1161c4ff8ga1f610053f62b8","userLogin":"testuser"}
Storing in Redux:
Object { authToken: "5467c25e000df49a1161c4ff8ga1f610053f62b8", userLogin: "testuser" }
Now the App component correctly renders the content instead of the login form :
User: testuser {"authToken":"5467c25e000df49a1161c4ff8ga1f610053f62b8","userLogin":"testuser"}
So far, so good. But if I refresh the page, the login form is displayed again. In the console I get :
App init check. Storing : App.js:15
Object { authToken: "5467c25e000df49a1161c4ff8ga1f610053f62b8", userLogin: "testuser" } App.js:16
App init check. Storing : App.js:15
Object { authToken: "5467c25e000df49a1161c4ff8ga1f610053f62b8", userLogin: "testuser" } App.js:16
I don't understand why sessionRegister(JSON.parse(storedSessionData)); is not correctly executed, and why do I get twice the console log App init check.
Thanks for having read all this, any help would be appreciated.

Answer 1

I think you're missing a dispatch
Instead of
sessionRegister(JSON.parse(storedSessionData));
it should be
dispatch(sessionRegister(JSON.parse(storedSessionData)));
in your App component. You get access to dispatch with a hook
const dispatch = useDispatch()
last, but not least, you're updating the store in every render, so that's why you see the log twice. I think you should probably move this to an Effect
const dispatch = useDispatch()
const sessionData = useSelector(selectSession);
useEffect(() => {
const storedSessionData = localStorage.getItem("sessionData");
if (storedSessionData && !sessionData.authToken) {
console.log("App init check. Storing :");
console.log(JSON.parse(storedSessionData));
sessionRegister(JSON.parse(storedSessionData));
} else {
if (!storedSessionData) console.log("No sessionData and no stored data");
}
}, [dispatch, sessionData])