在现代的 web 开发中，前端框架和库已经成为一个这个行业中最受欢迎的技术栈。其中，React.js 是一个被广泛应用的前端库之一。React.js 不仅提供了开箱即用的富交互 UI 组件，也带来了更好的性能和可维护性。但是，在实际开发中，由于数据的状态变化及时性和可靠性的要求，会面临一些困难。这时候，Redux 可以帮助我们更好地管理应用程序中的状态，而 redux-persist-node-storage 可以帮助我们在不同的设备上实现数据持久化。
什么是 redux-persist-node-storage？
redux-persist-node-storage 是一个 Redux 应用程序的数据持久化解决方案。这个包使用了 Node Storage（基于 key-value 存储方式）来保存 Redux 的 state，从而使得我们可以在前端应用中取得持久化的数据。
安装和使用 redux-persist-node-storage
首先，我们需要在项目中安装 redux-persist-node-storage 包。可以使用 npm 命令进行安装：
npm install --save redux-persist-node-storage
接下来，让我们来看看如何配置 redux-persist-node-storage 以及如何适配到我们的项目当中。
持久化 Redux：
首先，我们需要在项目中引入 redux 中的相关组件，然后创建 Redux Store，用于保存整个应用程序的状态。为了使 Redux Store 能够进行持久化存储，在创建 store 的时候，我们需要将其与 redux-persist-node-storage 绑定在一起：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - ------------- -------------- - ---- --------------- ------ ----------- ---- ---------------------------- ------ ----------- ---- ----------- ----- ------------- - - ---- ------- -------- ----------- - ----- ---------------- - ----------------------------- ------------ ------ ----- ----- - ----------------------------- ------ ----- -------------- - -------------------
这里，我们将应用程序的根目录 state 命名为 "root"，并且使用 nodeStorage 作为持久化存储。
恢复被持久化的状态
要恢复被持久化的状态，我们需要在进行 Store 注入之前，先检查本地存储中的状态。可以通过如下的方式：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ - ----- - ---- ---------- ------ ----- --------------- - -- -- - ----- --------- - ------------------- ------ - ------ --------- - -
这里，我们创建一个名为 initializeStore 的函数，用于在应用程序加载页面时创建 Store 并检查是否有本地存储的持久化状态，并返回 store 和 persistor。
存储和恢复具体的 schema
在有些情况下，我们需要对特定的 schema 进行持久化存储。这时候，我们可以通过下面的方式存储和恢复具体的 schema：
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- --------------- ------ - ----- - ---- ---------- ----- ------------- - - ---- ------- -------- ------------ ---------- ------------ - ----- ---------------- - ----------------------------- ------------ ------ ----- --------------- - -- -- - ----- --------- - ------------------- ------ - ------ --------- - -
这里，我们将应用程序根目录的 appState schema 进行了持久化存储。只有 appState 中的状态变化才会进行存储。
给出一个例子
为了更好的理解上面所述的使用方法，这里给出一个简单的例子。这里我们将创建一个 Counter 组件，并使用 redux-persist-node-storage 来持久化 Counter 的值。
首先，我们创建一个 action：
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'
export function increment() {
return {
type: INCREMENT_COUNTER
}
}然后我们来创建一个 reducer：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------
----- ------------ - -
------ -
-
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------------
------ -
---------
------ ----------- - -
-
--------
------ -----
-
-接着我们来创建一个 Counter app:
-- -------------------- ---- -------
------ - --------- - ---- -----------
------ - ------------ ----------- - ---- -------------
-------- --------- -
----- - ----- - - ----------------- -- --------------
----- -------- - -------------
------ -
-----
----------------
------- ----------- -- ---------------------------------
------
-
-
------ ------- -------最后，我们需要将 Redux Store 与我们的应用程序连接起来，并且在项目中存储和恢复状态：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
------ - ------ -------------- - ---- ---------
-------- ----- -
------ -
--------- --------------
------------ --------------------------------
-------- --
--------------
-----------
-
-
--------------------------- -- -
----- ----- - -------------------------
------------------------------- ----------------------
--
------ ------- ---这里，我们将 Counter 组件包装在 Provider 组件中，并使用 PersistGate 来检查本地存储的状态。最后，我们可以在 persistedStore 发生变化时，将相应的状态进行存储。
结论
在本文中，我们深入探讨了如何使用 redux-persist-node-storage 来实现在前端应用程序中存储和恢复状态。我们了解了如何将 redux-persist-node-storage 与我们的 Redux Store 绑定，并在启动应用程序时恢复本地存储中的状态。我们还讲解了如何部分地为 redux-persist-node-storage 进行配置，来持久化特定的 schema。最后，我们根据一个实例，演示了如何使用 redux-persist-node-storage 来保持 Counter 的值的持久化，这将在实际开发中被广泛使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6fd284a9b7065299ccba7c