Question

113

Can you, or should you use localStorage in Redux's initial state?

rated 0 times [ 120] [ 7] / answers: 1 / hits: 18284 / 8 Years ago, tue, april 12, 2016, 12:00:00

For example...

export const user = (state = {

  id: localStorage.getItem('id'),

  name: localStorage.getItem('name'),

  loggedInAt: null

}, action) => {

    case types.LOGIN:

      localStorage.setItem('name', action.payload.user.name);

      localStorage.setItem('id', action.payload.user.id);

      return { ...state, ...action.payload.user }



    default:

      return {  ...state, loggedInAt: Date.now() }

}

That's a scaled down version of what I'm doing, default returns the state from localStorage as expected. However the state of my application is actually blank once I refresh the page.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaleyv

Add To Favorites

Follow

Total Points: 259

Total Questions: 99

Total Answers: 107

Location: Saint Helena

Member since Tue, Nov 3, 2020

4 Years ago

answered 8 Years ago janettejordynm · Accepted Answer

Redux createStore 2nd param is intended for store initialization:

createStore(reducer, [initialState], [enhancer])

So you can do something like this:

const initialState = {

  id: localStorage.getItem('id'),

  name: localStorage.getItem('name'),

  loggedInAt: null

};



const store = createStore(mainReducer, initialState);

Since reducers should be pure functions (i.e. no side effects) and localStorage.setItem is a side effect, you should avoid saving to localStorage in a reducer.

Instead you can:

store.subscribe(() => {

    const { id, name } = store.getState();



    localStorage.setItem('name', name);

    localStorage.setItem('id', id);

});

This will happen whenever the state changes, so it might affect performance.

Another option is to save the state only when the page is closed (refresh counts) using onBeforeUnload:

window.onbeforeunload = () => {

    const { id, name } = store.getState();



    localStorage.setItem('name', name);

    localStorage.setItem('id', id);

};