窗口重新加载时Redux状态重置(客户端) [英] Redux State Resets On Window Reload (Client Side)

问题描述

与对象&中的对象一样，我有非常大而复杂的对象，例如userInfo，chatInfo等.具有大量嵌套信息的数组.每次我刷新页面时，事情都在我的react应用程序中，redux状态被重置，我必须再次调用所有这些API.

I have very large and complicated objects like userInfo, chatInfo, and etc as in objects & arrays with very large and nested information. The thing is in my react app every time I refresh my page the redux state gets reset and I have to call all those API's again.

我对此主题进行了一些研究.我在redux上检查了Dan Abramov的Egghead教程.他的工作是在浏览器的localStorage中维护redux状态，并在每100或500 ms之后更新一次localStorage.我感觉好像是代码的味道.

I did some research on this topic. I checked Dan Abramov's egghead tutorial on redux. What he does is maintain the redux state in localStorage of the browser and updated the localStorage after every 100 or 500 ms. I feel as if this is a code smell.

连续观察localStorage状态并对其进行更新，这不会影响浏览器的性能.我的意思不是这不是Angular 1失败的原因，因为Angular 1一直在继续观察状态变量，过了一会儿，如果该站点在浏览器中保持活动状态，它只会变慢.因为我们的脚本不断地检查变量的状态.我觉得好像我们在这里做同样的事情.

Continuously watching the localStorage state and updating it, wouldn't it effect the performance of the browser. I mean wasn't this on of the reasons Angular 1 failed because it continuously kept on watching state variables and after a while if the site was kept live in the browser it just slowed down. Because our script continuously kept on checking the state of the variables. i feel as if we are doing the same thing here.

如果在localStorage中维持redux状态是正确的方法，有人可以告诉我为什么吗?如果没有，还有没有更好的方法?

If maintaining the redux state in localStorage is the right approach can someone tell me why so? And if not is there a better approach?

这不是>如何持续进行redux的重复项刷新状态树?因为我要征求意见，本地存储中的持久状态是否有代码味道

This is not a duplicate of How can I persist redux state tree on refresh? because I am asking for advice whether persisting state in local storage is a code smell or not

推荐答案

我认为在这里使用 localStorage 是最好的选择，因为似乎存储在客户端的数据是必需的.如果数据没有更改，则无需重复查询或监视 localStorage .

I think using localStorage is your best option here, since it seems the data you are storing there is needed on the client. If the data is not changing, you shouldn't need to repeatedly query, or watch, the localStorage.

您可以做的另一件事是将闭包包裹在您的 localStorage ，这样您在检索大"数据时就不会总是打磁盘.每个浏览器以不同的方式实现 localStorage ，因此不能保证一致的行为或I/O性能.

Another thing you can do is wrap a closure around your localStorage, so that you are not always hitting disk when retrieving your "large" data. Every browser implements localStorage differently, so there are no guarantees on consistent behaviour or I/O performance.

这还添加了一个简单的抽象层，该抽象层隐藏了实现，并在一处控制了与用户数据相关的所有内容.

This also adds a simple layer of abstraction which hides the implementation, and controls everything related to your user data in one place.

以下是用户配置文件数据关闭的简单示例:

Here is a simple example of user profile data closure:

// 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 ，并在闭包内部设置局部变量.

Set the user data object: This will overwrite the localStorage, and set the local variable inside the closure.

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

获取用户数据对象::这将从闭包内部的本地变量获取数据，或者如果未设置，则从 localStorage 获取数据.

Get the user data object: This will get the data from the local variable inside the closure, or else go get it from localStorage if it is not set.

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

这里的想法是，第一次在应用程序加载时或在第一次API调用时，将数据从 localStorage 加载到内存中.在用户个人资料数据发生更改之前(例如，用户更新了他们的个人资料)，直到您再次查询API，然后通过 UserProfile.setUserData(..)再次更新数据.代码>调用.

The idea here is to load data into memory, from localStorage, the first time, when your app loads, or on the first API call. Until such a time when the user profile data changes, (i.e. a user updates their profile, for example), then you would query the API again, and update the data again via the UserProfile.setUserData(..) call.

这篇关于窗口重新加载时Redux状态重置(客户端)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！