持久化 Redux 存储的正确架构及其重置

Question

我在网上商店工作。我有一个订单缩减器，我可以在其中保留我的订单。页面刷新后，我的商店变空（这很明显）。主要想法是将我的订单保存一段时间（例如，20 分钟）。另外，我只想保存我的商店（订单状态）。所以，我决定将我的状态保存到本地存储

但这里有个技巧。如何从架构和模式方面正确地做到这一点？我有几个想法：

1. 使用store.subscribe() 订阅我的商店，并在每次商店更改时重写我的本地存储。这会有点奇怪，因为我需要使用解析我的商店，取一部分并推送到本地存储。此外，每次更改都会调用我的回调，这可能会影响生产力。

2. 在调度程序中正确执行（我想这是一种反模式）：

   const addToOrder = orderItem => ({ type: actionTypes.ADD_TO_ORDER, payload: orderItem }); export const addItemToOrder = orderItem => dispatch => { // localstorage.setItem() ... dispatch(addToOrder(orderItem)); }

3. 使用类似的库
   https://www.npmjs.com/package/redux-persist
   https://www.npmjs.com/package/redux-localstorage
   https://www.npmjs.com/package/redux-localstorage-simple
   但是在这种情况下，如何在关闭标签后 20 分钟内清除我的本地存储？

那么，如何正确地保持我的状态以及如何在一段时间内清除本地存储？
提前感谢您的帮助！

Answer 1

一切皆有可能。其次，当您使用动作创建器来做额外的工作时。例如，action creators 用于获取数据，因此将数据存储到 localStore 不是问题。

我建议使用选项 3。它提供了最佳的关注点分离。用于存储数据的代码位于单个位置并分布在多个动作创建者中。

很遗憾，您将无法 to set expiration time 获取 localStore 项目。但是由于 localStore 只能由您的应用程序访问，您可能会永远保留项目，但会添加存储日期/时间。在应用程序下次启动期间，只需检查时间，如果数据超过 20 分钟，请清除它。您可以在config.merge 函数中进行此检查。