你能否,或者你应该在Redux的初始状态下使用localStorage？

Question

例如...

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

这是我正在做的缩小版本,默认按照预期从localStorage返回状态.但是,一旦刷新页面,我的应用程序状态实际上是空白的.

Answer 1

Redux createStore2nd param用于存储初始化:

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

所以你可以这样做:

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

const store = createStore(mainReducer, initialState);

由于Reducer应该是纯函数(即没有副作用)并且localStorage.setItem是副作用,因此应该避免在reducer中保存到localStorage.

相反,你可以:

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

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

只要状态发生变化,就会发生这种情况,因此可能会影响性能.

另一种选择是仅在页面关闭时使用onBeforeUnload以下方式保存状态(刷新计数):

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

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