在构建 Web 应用时，通常会使用 Redux 来管理应用的状态，使用 Redux 可以帮助我们更好地组织应用的数据流，并提高应用的可维护性和可扩展性。但是，当用户刷新页面或者重新打开应用时，Redux 中的状态会丢失，这就需要我们持久化 Redux 中的状态。
本文将介绍 Redux 应用中的状态持久化方案，包括将状态保存在 LocalStorage 或者使用后端存储。
1. 将状态保存在 LocalStorage 中
LocalStorage 是 HTML5 提供的一种浏览器本地存储的方法，它可以在浏览器关闭后仍然保存数据，而且不会过期。因此，可以将 Redux 中的状态保存在 LocalStorage 中，实现状态持久化。
1.1. 使用 redux-persist
redux-persist 是一个 Redux 状态持久化库，它可以自动将 Redux 中的状态保存在 LocalStorage 中。
使用 redux-persist 非常简单，只需要在 Redux store 中添加中间件即可：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ --- --- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------ ----------------- ------------------ ---------- --- -- ------ ----- --------- - --------------------
上面的代码中，我们首先使用 persistReducer 函数生成一个新的 reducer，这个 reducer 会自动将状态保存在 LocalStorage 中。然后，我们使用这个 reducer 创建 Redux store，并将 persistStore 函数的返回值存储到 persistor 变量中。
有了 persistor 变量，我们就可以在应用中使用 Redux Persist 提供的 PersistGate 组件，它可以在应用准备就绪后将保存在 LocalStorage 中的状态重新加载到 Redux store 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ----------------------------------
------ - -------- - ---- --------------
------ - ------ --------- - ---- ----------
------ --- ---- --------
----- ---- - -- -- -
--------- --------------
------------ -------------- ----------------------
---- --
--------------
-----------
--
------ ------- -----这样，我们就可以在应用中使用 Redux 并实现状态持久化了。
1.2. 手动实现状态持久化
如果你不想使用 redux-persist 库，那么也可以手动实现状态持久化。实现方式很简单，只需要在 Redux store 中添加一个监听器，监听 Redux store 中状态的变化，并将状态保存在 LocalStorage 中即可。
下面是一个示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - ------- -- -
--- -
----- --------------- - ----------------------
----------------------------- -----------------
- ----- ------- -
--------------------- -- ------- -------- -------
-
--
----- --------- - -- -- -
--- -
----- --------------- - ------------------------------
-- ------------------ -
------ ----------
-
------ ----------------------------
- ----- ------- -
--------------------- -- ---- -------- -------
------ ----------
-
--
----- ----- - -------------- ----------- --- -------------
------------------ -- -
----- ----- - -----------------
--------------------
---上面的代码中，我们首先定义了一个 persistState 函数，它将 Redux store 中的状态序列化为 JSON 字符串，并将其保存在 LocalStorage 中。然后，我们又定义了一个 loadState 函数，它会从 LocalStorage 中读取保存的状态，并反序列化为 JavaScript 对象。最后，我们在 Redux store 中添加了一个监听器，监听 Redux store 中状态的变化，并在状态发生变化时调用 persistState 函数。
2. 使用后端存储
除了将状态保存在 LocalStorage 中，我们还可以将状态保存在后端存储中，例如数据库、文件系统等。这种方式比 LocalStorage 更加灵活，可以支持多用户、多设备、多浏览器设备共享数据，而且可以使用更加安全的存储方式。
下面，我们将使用 MongoDB 来实现将状态保存在后端存储中的示例。
2.1. 安装 MongoDB 和 mongoose
首先，我们需要安装 MongoDB 和 mongoose，可以使用 npm 来安装：
npm install mongodb mongoose
2.2. 连接 MongoDB
假设我们已经在本地安装了 MongoDB，启动 MongoDB 后，我们可以使用 mongoose 来连接 MongoDB 数据库，下面是一个示例代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----------------------------------------------------- - ---------------- ----- ------------------- ----- ---------- -- - ---------------------- -- ---------- ---------------- -- - --------------------- -- ------- -- ---------- ------- ---
上面的代码中，我们首先使用 mongoose.connect 函数连接到 MongoDB 数据库，连接成功后输出一条日志。如果连接失败，会输出一条错误日志。
注意：在生产环境下，我们应该将数据库连接信息从代码中移除，并使用环境变量或者配置文件来管理数据库连接信息。
2.3. 创建 mongoose 模型
接下来，我们需要创建一个 mongoose 模型来表示保存在 MongoDB 中的应用状态。这个模型应该包括一个 key 字段和一个 value 字段，分别用来存储状态的键和值。
下面是一个示例代码：
-- -------------------- ---- ------- ----- - ------- ----- - - -------------------- ----- ----------- - --- -------- ---- - ----- ------- --------- ---- -- ------ - ----- ------------------- --------- ---- -- --- ----- ----- - -------------- ------------- -------------- - ------
上面的代码中，我们首先使用 mongoose.Schema 函数创建一个状态模式，然后使用 mongoose.model 函数将状态模式编译为一个 mongoose 模型。最后，我们导出这个 mongoose 模型。
注意：在实际应用中，我们应该根据实际需要定义更复杂的模式，以适应不同的保存数据类型。
2.4. 实现状态持久化
综上所述，我们可以使用以下代码来持久化 Redux 中的状态：
-- -------------------- ---- -------
----- ----- - -------------------
----- ------------ - ----- ------- -- -
--- -
----- ----------------- ---- ------- -- - ------ ----- -- - ------- ---- ---
- ----- ------- -
--------------------- -- ------- -------- -------
-
--
----- --------- - ----- -- -- -
--- -
----- --- - ----- --------------- ---- ------- ---
-- ------ -
------ ----------
-
------ ----------
- ----- ------- -
--------------------- -- ---- -------- -------
------ ----------
-
--上面的代码中，我们首先使用 State.updateOne 函数更新或者插入一条记录，保存 Redux store 中的状态。然后，我们又使用 State.findOne 函数查询保存的状态，并返回其值。
需要注意的是，由于 MongoDB 操作是异步的，所以我们需要使用 async/await 关键字来处理异步操作。
3. 结论
本文介绍了 Redux 应用中的状态持久化方案，其中包括将状态保存在 LocalStorage 中和使用后端存储。如果使用 LocalStorage，可以使用 redux-persist 库来实现自动化，如果需要使用后端存储，可以使用 mongoose 来连接 MongoDB 来实现。希望这篇文章能够对大家学习 Redux 和状态持久化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f5221fc5c563ced56dd67d