CODEWITHSUNDEEP
node.jslocal-storagereact-routerredux
ElPirru
ElPirru

Reputation: 183

How to get localStorage before rendering reactjs components in universal app?

I am storing "some" user's session data in the client's localStorage, I need to get this data after server rendering and before the reactjs app is loaded so I can check if the user session is valid. If the user session is valid, I update the redux store with the user data; otherwise, I leave it as is.

I am using react-router's onEnter hook to check if the user's session is valid. The problem is that I am requesting the data saved in the localStorage on the server side (which I know is not available).

Therefore, I need a way to check the localStorage after the server render and have it ready for the onEnter hook.

I would also like to know if there is a way, while on the server side, to request the client's localStorage?

Upvotes: 1

Views: 3908

Answers (1)

Mike
Mike

Reputation: 1452

You will need to sort out the logic in between createStore and render() in your client.js file.

import {createStore} from 'redux';
const store = createStore();

if(localStorage.get('token')) {
    store.dispatch(authenticate(localStorage.get('token')));
}

render(
    <Provider store={store}><App/></Provider>,
    document.getElementById('js-react')
);

Keep in mind that if there is any asynchronous code in the authenticate action creator that you will then need to wait for it to finish before you can render.

Upvotes: 2

Related Questions