窗口重新加载(客户端)上的Redux状态重置

Question

我有非常庞大和复杂的对象,如userInfo,chatInfo等,就像在具有非常大和嵌套信息的对象和数组中一样.每当我刷新页面时,就会在我的反应应用程序中,redux状态被重置,我必须再次调用所有这些API.

我做了一些关于这个主题的研究.我查看了Dan Abramov关于redux的egghead教程.他所做的是在浏览器的localStorage中维护redux状态,并在每100或500毫秒后更新localStorage.我觉得这就像是代码味道.

不断观察localStorage状态并更新它,不会影响浏览器的性能.我的意思是Angular 1失败的原因并不是因为它持续观察状态变量,过了一段时间,如果网站在浏览器中保存,它就会放慢速度.因为我们的脚本不断检查变量的状态.我觉得好像我们在这里做同样的事情.

如果在localStorage中维护redux状态是正确的方法可以有人告诉我为什么这样做？如果没有,是否有更好的方法？

Answer 1

问题是你需要在什么时候实现持久性.我觉得你的案例的答案是在页面重新加载.因此,如果您担心性能,我会说:*仅在状态发生变化时更新localStorage.更新状态时在reducer内部.*启动应用程序时从localStorage读取.

(这种方式只有在状态发生变化且只读一次时才会写入)

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

Answer 2

我认为使用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();

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

Answer 3

我只会将其作为弱缓存而不依赖它.本地存储空间有限(例如Chrome上为5mb),可能无法使用.您必须仔细验证您的数据是否已写入.

正如其他人所说的那样,你不会看到本地存储,你会定期冲洗商店.但我同意,盲目地认为你所有的州都适合坚持本地存储似乎是一个相当粗糙的黑客.与所有缓存解决方案一样,您需要仔细考虑其含义(新鲜度,过期等).听起来你可能想要逐步做到这一点 - 挑选一些适合缓存的低挂水果,并考虑缓存该状态在本地存储中的含义.

Answer 4

localStorage我认为在大多数情况下，您希望在某些操作发生后保留您的状态。至少在我需要坚持的项目中一直都是这样。

因此，如果您正在使用redux-saga,redux-observable或redux-cycles来编排您的副作用，那么localStorage每当这些操作之一发生时，您就可以轻松地使该副作用（将状态持久化到 ）发生。我认为这是比基于时间间隔“随机”保存数据更好的方法。