将redux工具包状态持久化到浏览器会话存储的最佳选择?

oalqel3c  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(168)

我需要将Redux Toolkit状态保存到浏览器会话存储中。我需要这样做,以便在页面刷新时保持Redux Toolkit状态。一些google搜索似乎表明redux-persist是一个很好的选择。我还能够拼凑出一个工作实现,将其保存到浏览器本地存储中,这似乎是redux-persist的默认方法。我需要保存到会话存储中,但我发现很难找到一个有效的实现。
所以一个问题是--redux-persist hands-down是目前和可预见的未来在页面刷新时保持redux-toolkit状态的最流行的选择吗?redux-persist的npm页面显示这个包每周的下载量超过50万次,所以很明显它非常受欢迎。但是我也注意到这个包的最后一次更新是在3年前,所以看起来这个包并没有得到积极的维护。
而且,将状态保存到浏览器会话存储的能力似乎是一个非常基本的设计需求,所以这似乎是redux-toolkit最终将作为其标准包的一部分--或者至少作为某种类型的可选/辅助包提供的东西。redux-toolkit有类似的东西吗?或者你知道这是否是redux-toolkit开发团队在他们的路线图上有的东西吗?
还有,我注意到Redux Toolkit文档提供了使用Redux Toolkit和redux-persist的具体说明。react-redux-firebase是redux-toolkit文档调用的唯一其他工具。因此,看起来redux-persist是当前在使用redux-toolkit时跨页面刷新保持全局状态的事实上的标准。这是redux-toolkit开发社区的普遍共识吗?有没有什么新的进展是我应该知道的?
最后一件事--我可以让redux-persist保存到我的nextjs应用程序的本地存储的默认目标,但是我在使用redux-persist将redux-toolkit状态持久化到浏览器会话存储时遇到了一些问题。你知道有什么公共repos可以提供一个很好的代码示例吗?

axr492tv

axr492tv1#

而且,将状态保存到浏览器会话存储中的功能似乎是一个非常基本的设计需求,因此,这似乎是redux-toolkit最终将作为其标准包的一部分而包含的功能
它非常简单,只需几行代码就可以完成,根本不需要任何库:

// middleware
const saveToSessionStorage = store => next => action => {
    const result = next(action)
    window.sessionStorage.setItem('reduxState', JSON.stringify(store.getState()))
    return result
}

// preloaded state
createStore(reducer, JSON.parse(window.sessionStorage.getItem('reduxState')))

当然,这不是很花哨,你可能不想每次都保存每个操作的状态,sessionStorage最初可以是空的,等等--但是从一些简单的东西开始是值得一试的。

相关问题