使用 redux-storage 重置存储在本地存储中的状态的问题答案

【问题标题】：Issues with resetting state stored in local storage, using redux-storage使用 redux-storage 重置存储在本地存储中的状态的问题
【发布时间】：2016-07-10 02:33:40
【问题描述】：

我在应用程序中使用 react-storage 将我的状态保存在本地存储中。为了清除状态，我这样做：

import createEngine from 'redux-storage-engine-localstorage'
const engine = createEngine('my-save-key');

...

engine.save({})
.then( () => {
  dispatch({type: 'SOME_ACTION'})
})
...

engine.save({}) 理论上应该将我本地存储中的状态保存到一个空对象。完成此操作后，我希望下一个调度操作的先前状态是那个空对象。但是，不知何故，在.then 中调度的操作仍然引用旧状态，就好像该状态从未重置一样。

另外，我一直在尝试使用 localStorage.clear() 来重置状态，但我遇到了同样的问题。关于可能出现什么问题以及如何解决此问题的任何想法？

【问题讨论】：

标签： reactjs redux local-storage redux-storage

【解决方案1】：

嗯，看起来 Redux 不使用存储在本地存储中的状态，除非通过 engine.load() 告诉它这样做。这是一件好事。如果使用 localstorage 意味着 Redux 不应该将自己的状态保存在内存中，而是始终从 localstorage 中读取，那对性能来说将是可怕的。 engine.save() 似乎对实际的 redux 状态没有任何作用，它只是将 localstorage 值设置为您以后可能加载的值，例如下次启动应用程序时。

engine.load() 通常用于获取应用程序的初始状态，然后在您想要拍摄当前状态的快照时使用engine.save()，以便稍后重现。 save() 和 load() 的源代码应该是不言自明的：

export default (key) => ({
    load() {
        let jsonState;

        try {
            jsonState = localStorage.getItem(key);
        } catch (err) {
            return Promise.reject(err.message);
        }

        return Promise.resolve(JSON.parse(jsonState) || {});
    },

    save(state) {
        const jsonState = JSON.stringify(state);

        try {
            localStorage.setItem(key, jsonState);
        } catch (err) {
            return Promise.reject(err.message);
        }

        return Promise.resolve();
    }
});

【讨论】：