Si può o si deve usare localStorage nello stato iniziale di Redux?

Question

Per esempio ...

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() } 
} 

Questa è una versione ridotta di quello che sto facendo, di default restituisce lo stato da localStorage come previsto. Tuttavia, lo stato della mia applicazione è in realtà vuoto una volta che aggiorno la pagina.

Answer 1

Redux createStore secondo param è destinato per il deposito di inizializzazione:

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

modo da poter fare qualcosa di simile:

const initialState = { 
    id: localStorage.getItem('id'), 
    name: localStorage.getItem('name'), 
    loggedInAt: null 
}; 

const store = createStore(mainReducer, initialState); 

Dal riduttori dovrebbero essere le funzioni di puro, ovvero senza effetti collaterali, e localStorage.setItem è un effetto collaterale, che sicuramente danneggerà i test, dovresti evitare di salvare in localStorage in un riduttore. Invece si può:

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

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
}); 

Questo accadrà ogni volta che cambia di stato, quindi potrebbe influire sulle prestazioni.

Un'altra opzione è quella di salvare lo stato solo quando la pagina è chiusa (conteggi di aggiornamento) utilizzando onBeforeUnload:

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

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
};