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第二个参数用于商店初始化：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
  <form-group classList="sample-class"></form-group>
</div>

所以你可以这样做：

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

由于reducer应该是纯函数（即没有副作用）并且const initialState = { id: localStorage.getItem('id'), name: localStorage.getItem('name'), loggedInAt: null }; const store = createStore(mainReducer, initialState);是副作用，因此应该避免在reducer中保存到localStorage。

相反，您可以：

localStorage.setItem

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

另一种选择是仅在页面关闭时使用store.subscribe(() => { const { id, name } = store.getState(); localStorage.setItem('name', name); localStorage.setItem('id', id); });保存状态（刷新计数）：

onBeforeUnload

您是否应该在Redux的初始状态下使用localStorage？

1 个答案: