javascript - react - ¿Puede, o debería usar localStorage en el estado inicial de Redux?

localstorage react redux

Question

Por ejemplo...

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

Esa es una versión reducida de lo que estoy haciendo, el valor predeterminado devuelve el estado de localStorage como se esperaba. Sin embargo, el estado de mi aplicación está en blanco una vez que actualizo la página.

Answer 1

Redux createStore 2nd createStore está destinado a la inicialización de la tienda:

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

Entonces puedes hacer algo como esto:

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

const store = createStore(mainReducer, initialState);

Como los reductores deben ser funciones puras, es decir, no tienen efectos secundarios, y localStorage.setItem es un efecto secundario, que definitivamente perjudicará las pruebas, debe evitar guardar en localStorage en un reductor. En cambio, puedes:

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

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

Esto sucederá cada vez que cambie el estado, por lo que podría afectar el rendimiento.

Otra opción es guardar el estado solo cuando la página está cerrada (actualización cuenta) usando onBeforeUnload :

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

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