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

Question

在Redux应用程序中写入localStorage的位置？我想将状态树的某些部分保存到localStorage。适当的地方是什么？减速器还是动作？

Answer 1

减速剂从来不是一个合适的地方，因为减速剂应该是纯净的，没有副作用。

我建议只在订阅者中执行此操作：

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

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

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

如果您使用，combineReducers()您会注意到没有收到状态的Reducer将使用其默认state参数值正常“启动” 。这可能非常方便。

建议你去掉你的用户，这样你就不会太快写入localStorage，或者你会遇到性能问题。

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

Answer 2

要填写丹阿布拉莫夫答案的空白，你可以这样使用store.subscribe()：

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

在创建商店之前，检查localStorage并解析您的密钥下的任何JSON，如下所示：

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

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

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

Answer 3

总之一句：中间件。

查看redux-persist。或者自己写。