reactjs-如何在刷新时持久化redux状态树?

Redux文档的第一个原理是:

整个应用程序的状态存储在单个存储中的对象树中。

而且我实际上以为我对所有原则都很了解。但是我现在对应用程序的含义感到困惑。

我理解,如果应用程序仅意味着网站中复杂的小部分之一并且仅用一页即可工作。 但是,如果申请意味着整个网站怎么办? 我应该使用LocalStorage还是cookie或其他保留状态树的东西? 但是如果浏览器不支持LocalStorage怎么办?

我想知道开发人员如何保留其状态树! :)

incleaf asked 2019-11-10T22:50:58Z
4个解决方案
71 votes

编辑25-八月-2019

如评论之一所述。 原始的redux-storage软件包已移至react-stack。 这种方法仍然专注于实现自己的状态管理解决方案。


原始答案

尽管所提供的答案在某些时候是有效的,但重要的是要注意原始的redux-storage软件包已被弃用,并且不再被维护...

软件包redux-storage的原始作者决定弃用该项目,不再维护。

现在,如果您不想依赖其他软件包来避免将来出现此类问题,那么很容易推出自己的解决方案。

您需要做的只是:

1-创建一个从RxJs返回状态的函数,然后在第二个参数中将该状态传递给lodash的redux函数,以对商店进行水合

 const store = createStore(appReducers, state);

2-监听状态更改,每次状态更改时,将状态保存到RxJs

store.subscribe(() => {
    //this is just a function that saves state to localStorage
    saveState(store.getState());
}); 

就这样...我实际上在生产中使用了类似的东西,但是我没有使用函数,而是编写了一个非常简单的类,如下所示...

class StateLoader {

    loadState() {
        try {
            let serializedState = localStorage.getItem("http://contoso.com:state");

            if (serializedState === null) {
                return this.initializeState();
            }

            return JSON.parse(serializedState);
        }
        catch (err) {
            return this.initializeState();
        }
    }

    saveState(state) {
        try {
            let serializedState = JSON.stringify(state);
            localStorage.setItem("http://contoso.com:state", serializedState);

        }
        catch (err) {
        }
    }

    initializeState() {
        return {
              //state object
            }
        };
    }
}

然后在引导您的应用程序时...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

let store = createStore(appReducers, stateLoader.loadState());

store.subscribe(() => {
    stateLoader.saveState(store.getState());
});

希望对别人有帮助

性能说明

如果应用程序中状态更改非常频繁,则过多地保存到本地存储可能会损害应用程序的性能,尤其是要序列化/反序列化的状态对象图很大时。 对于这些情况,您可能想使用RxJslodash或类似的方法来反跳或限制将状态保存到localStorage的功能。

Leo answered 2019-11-10T22:53:44Z
58 votes

如果您想在浏览器刷新期间保持redux状态,最好使用redux中间件来实现。 查看redux-persist和redux-storage中间件。 他们都试图完成存储Redux状态的相同任务,以便可以随意保存和加载它。

-

编辑

自从我重新讨论了这个问题已经过去了一段时间,但是看到另一个问题(尽管答案更高)鼓励您提出自己的解决方案,我想我会再回答一次。

在进行此编辑时,两个库都已在最近六个月内更新。 我的团队已经在生产中使用redux-persist几年了,没有任何问题。

尽管这似乎是一个简单的问题,但您会很快发现,推出自己的解决方案不仅会导致维护负担,还会导致错误和性能问题。 我想到的第一个例子是:

  1. JSON.stringifyJSON.parse不仅会在不需要时损害性能,而且还会引发错误,这些错误在未处理的关键代码段(如redux存储)中处理时可能会使应用程序崩溃。
  2. (以下答案中有部分提到):弄清楚何时以及如何保存和还原应用程序状态不是一个简单的问题。 经常这样做会损害性能。 这还不够,或者如果错误的状态持续存在,您可能会发现自己有更多的错误。 上面提到的库在其方法上经过了实战测试,并提供了一些非常简单的方法来自定义其行为。
  3. Redux的优点(尤其是在React生态系统中)的部分原因是它可以放置在多个环境中。 截至此编辑,redux-persist具有15种不同的存储实现,包括用于Web的出色的localForage库,以及对React Native,Electron和Node的支持。

总结起来,对于缩小的3kB +压缩(在此编辑时),这不是问题,我会要求我的团队自行解决。

michaelgmcd answered 2019-11-10T22:52:00Z
0 votes

这基于Leo的答案(应该是公认的答案,因为它无需使用任何第三方库即可实现问题的目的)。

我创建了一个Singleton类,该类创建一个Redux Store,使用本地存储对其进行持久化,并允许通过getter对其存储进行简单访问。

要使用它,只需在主类中放置以下Redux-Provider元素:

// ... Your other imports
import PersistedStore from "./PersistedStore";

ReactDOM.render(
  <Provider store={PersistedStore.getDefaultStore().store}>
    <MainClass />
  </Provider>,
  document.getElementById('root')
);

并将以下类添加到您的项目中:

import {
  createStore
} from "redux";

import rootReducer from './RootReducer'

const LOCAL_STORAGE_NAME = "localData";

class PersistedStore {

  // Singleton property
  static DefaultStore = null;

  // Accessor to the default instance of this class
  static getDefaultStore() {
    if (PersistedStore.DefaultStore === null) {
      PersistedStore.DefaultStore = new PersistedStore();
    }

    return PersistedStore.DefaultStore;
  }

  // Redux store
  _store = null;

  // When class instance is used, initialize the store
  constructor() {
    this.initStore()
  }

  // Initialization of Redux Store
  initStore() {
    this._store = createStore(rootReducer, PersistedStore.loadState());
    this._store.subscribe(() => {
      PersistedStore.saveState(this._store.getState());
    });
  }

  // Getter to access the Redux store
  get store() {
    return this._store;
  }

  // Loading persisted state from localStorage, no need to access
  // this method from the outside
  static loadState() {
    try {
      let serializedState = localStorage.getItem(LOCAL_STORAGE_NAME);

      if (serializedState === null) {
        return PersistedStore.initialState();
      }

      return JSON.parse(serializedState);
    } catch (err) {
      return PersistedStore.initialState();
    }
  }

  // Saving persisted state to localStorage every time something
  // changes in the Redux Store (This happens because of the subscribe() 
  // in the initStore-method). No need to access this method from the outside
  static saveState(state) {
    try {
      let serializedState = JSON.stringify(state);
      localStorage.setItem(LOCAL_STORAGE_NAME, serializedState);
    } catch (err) {}
  }

  // Return whatever you want your initial state to be
  static initialState() {
    return {};
  }
}

export default PersistedStore;

thgc answered 2019-11-10T22:54:34Z
-3 votes

原来的问题是

我想知道开发人员如何保留其状态树! :)

好吧,因为我没有看到这个答案,而您确实使用了React标签; 通常,React Webapps被实现为SPA(单页应用程序),但实际上并没有刷新浏览器。 他们可能会通过更改您在地址栏中看到的URL使其看起来像它。 流行的方法是redux-persist

但是,SPA状态仍然无法幸免于浏览器刷新,所以这就是redux-persist出现的时间。

Barry Staes answered 2019-11-10T22:55:13Z
translate from https://stackoverflow.com:/questions/37195590/how-can-i-persist-redux-state-tree-on-refresh