时间戳

首页 > 解决方案 > 持久化 Redux 存储的正确架构及其重置

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

问题描述

我在网上商店工作。我有一个订单缩减器，我可以在其中保留我的订单。页面刷新后，我的商店变空（这很明显）。主要想法是让我的订单保存一段时间（例如，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 分钟内清除我的本地存储？

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

标签： javascriptreactjsreduxreact-reduxlocal-storage

解决方案

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

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

不幸的是，您将无法为 localStore 项目设置过期时间。但是由于 localStore 只能由您的应用程序访问，您可能会永远保留项目，但会添加存储日期/时间。在应用程序下次启动期间，只需检查时间，如果数据超过 20 分钟，请清除它。您可以执行此签入config.merge功能。

推荐阅读