javascript - 你可以或者应该在 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 createStore第二个参数用于存储初始化:

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