Can you, or should you use localStorage in Redux's initial state?
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);};