介绍
在实际开发中，我们经常会遇到需要将数据持久化的情况。对于 Redux 应用来说，需要将 Redux Store 中的数据存储到本地或者服务器上，以便下次使用或者进行数据恢复。
本文将介绍在 Redux 中实现数据持久化的方法，包括使用浏览器本地存储和服务器存储等方式。
浏览器本地存储
浏览器本地存储是将数据存储在浏览器中的一种方式，包括 localStorage 和 sessionStorage。
localStorage
localStorage 是一种基于键值对的本地存储方式，其中的数据可以长期存储（不会被清除），并且相同域名下的所有页面都可以访问这些数据。在 Redux 中使用 localStorage 存储数据需要结合 middleware 进行，以便对存储数据进行一些操作，例如对 Store 中的数据进行序列化、反序列化等操作。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ --------------- ---- --------------
------ - ----- ---- - ---- ----------------------------
------ ----------- ---- -------------
----- ----------- - ------------------
----- ----- - ------------
------------
------- -- - ------------ -----
--------------------
------------------------------- ------ --------- ---- --- -- ------ ------------ -
-
--
------ ------- ------上面的代码中，load() 函数用于从 localStorage 中加载数据，save() 函数用于将数据保存到 localStorage 中，并且加入了一定的延迟（1000ms），以防止频繁更新本地存储数据。
sessionStorage
sessionStorage 是一种类似于 localStorage 的本地存储方式，但是所有的数据都是会话级别的（只在同一个会话中存在），当窗口或者标签页被关闭时，所有的数据也会被清除。
在 Redux 中，使用 sessionStorage 存储数据和使用 localStorage 非常类似，只需要将save() 和 load() 替换为 sessionSave() 和 sessionLoad() 即可。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ --------------- ---- --------------
------ - ------------ ----------- - ---- ----------------------------
------ ----------- ---- -------------
----- ----------- - ------------------
----- ----- - ------------
------------
-------------- -- - -------------- -----
--------------------
------------------------------- ------------- --------- ---- --- -- ------ -------------- -
-
--
------ ------- ------服务器存储
除了使用浏览器本地存储之外，也可以使用服务器存储的方式来实现 Redux 中的数据持久化。例如，可以将 Store 的数据保存到 MongoDB、MySQL 等数据库中。这种方式通常需要使用 Node.js 等服务器端技术进行开发。
Node.js + MongoDB
下面的代码演示了如何在 Node.js 中使用 MongoDB 实现 Redux 中的数据持久化。首先需要安装一些依赖库：
npm install --save mongoose express body-parser cors
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- ---------- - -----------------------
----- ---- - ----------------
----- -------- - --------------------
----- --- - ----------
----- ---- - ---------------- -- -----
----------------
---------------------------
--------------------------------------------------- -
---------------- -----
------------------- -----
---
----- ----------- - --- -----------------
----- -------
---
----- ----- - ----------------------- -------------
----------------- ----- ---- -- -
---------------
------------- -- ---------------------------------
--------- -- --------------
---
------------------ ----- ---- -- -
----- -------- - --- -------
----- -------------------------
---
----------------------- -- --------------- ------------------ -- --------------- ------ ----------
---
---------------- -- -- -
------------------- -- ------- -- ----- ----------
---在上面的代码中，mongoose.connect() 用于连接数据库，storeSchema 定义了数据库中存储的数据模型，Store.findOne() 和 newStore.save() 分别用于从数据库中加载 Store 的数据和将 Store 的数据保存到数据库中。
在 Redux 中，需要使用 redux-thunk 中间件对 Store 进行异步操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ - ------------------- - ---- ---------------------------
------ ----------- ---- -------------
----- -------- - ------------------------------
----- ----------- - ------------------
----- --------- - ----- -- -- -
----- -------- - ----- --------------------
------ --------------
--
----- --------- - ----- ------- -- -
----- -------------------- -------
--
----- -------------------- - -- -- -
------ ----- ---------- -- -
----- ----- - ----- ------------
---------- ----- ------------- -------- ----- ---
--
--
----- ------------------- - ------- -- -
------ ------ -- -------- -- -
----- ------ - -------------
----------------------------
------ -------
--
--
----- ----- - ------------
------------
--------------------------------------------------- ---------------------
--
---------------------------------------
------ ------- ------上面的代码中，loadAndDispatchStore() 函数用于从服务器中异步加载 Store 并 dispatch 到 Redux 中，saveStoreMiddleware() 用于将 Store 的变化保存到服务器中。
结论
本文介绍了在 Redux 中实现数据持久化的方法，包括使用浏览器本地存储和服务器存储。这些方法可以让我们更好地管理 Store 中的数据，并且在某些情况下，也能够防止数据丢失。
参考资料
- redux-localstorage-simple
- Building an App with Redux and MongoDB
- Simpler Redux Store Persistence with Local Storage and Higher Order Reducers
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728a3262e7021665e20f7a4