在 Redux 应用中的哪个位置写入 localStorage？

javascript local-storage redux state

2022-08-30 01:14:17

我想将状态树的某些部分保存到本地存储中。什么是合适的地方？减速器还是动作？

答案 1

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

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

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

在创建存储之前，请阅读这些持久化部件：

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

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

建议您取消订阅者，以免写入localStorage的速度太快，否则会出现性能问题。

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

答案 2

要填补Dan Abramov答案的空白，你可以这样使用：store.subscribe()

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

在创建存储之前，请检查并解析密钥下的任何 JSON，如下所示：localStorage

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

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

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