在Window Reload (客户端)上重置Redux状态

Question

我有非常大和复杂的对象，如userInfo、chatInfo等，比如对象&具有非常大的嵌套信息的数组。事情是在我的反应应用，每次我刷新我的页面，还原状态会被重置，我必须再次调用所有这些API。

我对这个话题做了一些研究。我查看了Dan关于redux的egghead教程。他所做的是在浏览器的localStorage中维护redux状态，并且每隔100或500 ms更新一次localStorage。我觉得这好像是暗号的味道。

不断地监视和更新localStorage状态，这不会影响浏览器的性能。我的意思是，这不是角质1失败的原因之一，因为它一直在观察状态变量，过了一段时间，如果站点在浏览器中运行，它就会慢下来。因为我们的脚本不断地检查变量的状态。我觉得我们在这里也在做同样的事情。

如果在localStorage中维护redux状态是正确的方法，那么有人能告诉我为什么吗？如果没有，是否有更好的办法？

这不是如何在刷新时持久化redux状态树？的副本，因为我在征求意见，在本地存储中的持久化状态是否是一种代码气味。

Answer 1

我认为在这里使用localStorage是最好的选择，因为您在那里存储的数据似乎在客户机上是必需的。如果数据没有变化，则不需要重复查询或查看localStorage。

您可以做的另一件事是将闭锁封装在localStorage上，这样在检索“大”数据时就不会总是访问磁盘。每个浏览器实现localStorage的方式不同，因此无法保证一致的行为或I/O性能。

这还增加了一个简单的抽象层，它隐藏了实现，并在一个地方控制与用户数据相关的所有内容。

下面是一个简单的用户配置文件数据闭包示例：

// UserProfile.js
var UserProfile = (function() {
  var userData = {};

  var getUserData = function() {
    if (!userData) { 
      userData = JSON.parse(localStorage.getItem("userData"));
    }
    return userData;
  };

  var setUserData = function(userData) {
    localStorage.setItem("userData", JSON.stringify(userData));
    userData = JSON.parse(localStorage.getItem("userData"));
  };

  return {
    getUserData: getUserData,
    setUserData: setUserData
  }
})();

export default UserProfile;

设置用户数据对象：--这将覆盖localStorage，并在闭包中设置局部变量。

import UserProfile from '/UserProfile';
UserProfile.setUserData(newUserData);

获取用户数据对象：--这将从闭包内的局部变量获取数据，否则，如果未设置它，则从localStorage获取数据。

import UserProfile from '/UserProfile';
var userData = UserProfile.getUserData();

这里的想法是在应用程序加载时，或者在第一个API调用时，将数据首次从localStorage加载到内存中。在用户配置文件数据发生变化(例如，用户更新其配置文件)之前，您将再次查询API，并通过UserProfile.setUserData(..)调用再次更新数据。

Answer 2

问题是你需要在什么时候实现持久化。我觉得在你的情况下答案是在一个页面重新加载。因此，如果您担心性能问题，我会说：*只有在状态发生变化时才更新localStorage。当你更新状态的时候在你的减速器里面。*在启动应用程序时从localStorage阅读。

(这样，您只在状态发生变化时才进行写入，并且只读取一次)

我将推荐https://github.com/rt2zz/redux-persist包来实现Redux应用程序中的持久性。

Answer 3

我只会将其作为一个弱缓存来执行，而不会依赖它。本地存储是有限的(例如，Chrome上有5MB)，而且可能无法使用。你必须仔细核实你的数据是写好的。

就像其他人说的，你不会看localStorage --你会定期冲洗商店。但是，我同意，盲目地假定您的所有州都适合在本地存储，这似乎是一种相当粗糙的攻击。与所有缓存解决方案一样，您需要仔细考虑其含义(新鲜、过期等)。听起来，您可能希望逐步地这样做--挑选一些适合于缓存的低挂水果块，并考虑在本地存储中缓存状态的含义。