在 Redux 应用程序中写入 localStorage 的位置？

Question

我想将状态树的某些部分保存到 localStorage。这样做的合适地点是什么？减速器还是动作？

原文由 Marco de Jongh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Reducer 永远不是执行此操作的合适位置，因为 reducer 应该是纯净的并且没有副作用。

我建议只在订阅者中这样做：

 store.subscribe(() => {
  // persist your state
})

在创建商店之前，请阅读那些持久化的部分：

 const persistedState = // ...
const store = createStore(reducer, persistedState)

如果你使用 combineReducers() 你会注意到没有收到状态的减速器将使用它们的默认值 state 参数值正常“启动”。这可能非常方便。

建议您对订阅者进行去抖动，这样您就不会太快地写入 localStorage，否则您将遇到性能问题。

最后，您可以创建一个封装它的中间件作为替代方案，但我会从订户开始，因为它是一个更简单的解决方案并且可以很好地完成工作。

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要填写 Dan Abramov 的答案，您可以使用 store.subscribe() ，如下所示：

 store.subscribe(()=>{
  localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})

在创建商店之前，检查 localStorage 并像这样解析您的密钥下的任何 JSON：

 const persistedState = localStorage.getItem('reduxState')
                       ? JSON.parse(localStorage.getItem('reduxState'))
                       : {}

然后，您将此 persistedState 常量传递给您的 createStore 方法，如下所示：

 const store = createStore(
  reducer,
  persistedState,
  /* any middleware... */
)

原文由 Andrew Samuelsen 发布，翻译遵循 CC BY-SA 4.0 许可协议