你能或者应该在 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() }
}

这是我正在做的事情的缩小版本，默认 returns 来自 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);
};

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

Can you, or should you use localStorage in Redux's initial state?

javascript

flux

ecmascript-6

reactjs

redux