如何在刷新时保持Redux状态树？

编辑25-八月-2019

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

---

原始答案

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

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

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

您需要做的只是：

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

 const store = createStore(appReducers, state);

2-监听状态更改，每次状态更改时，将状态保存到 localStorage

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());
});

希望对别人有帮助

性能说明

如果状态更改在您的应用程序中非常频繁，则过多地保存到本地存储可能会损害您的应用程序的性能，尤其是在要序列化/反序列化的状态对象图很大的情况下。对于这些情况，您可能希望去抖动或油门，使用保存状态的localStorage功能RxJs，lodash或类似的东西。

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

-

编辑

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

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

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

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

综上所述，对于缩小的3kB +压缩（在此编辑时），这不是问题，我要求我的团队自行解决。