Redux 是 React 生态中最流行的应用状态管理工具之一，但在某些情况下，应用需要在重启后恢复先前的状态。这是通过持久化 Redux store 实现的，本文将深入探讨 Redux 中的持久化。
前置知识
在继续阅读之前，请确保您已经熟悉 Redux 中的基础知识。
什么是持久化？
持久化是指在系统关闭或断电之后，数据仍然可以被恢复。在另一个层面上，持久化是将数据从 volatile（易失性）状态转换为 non-volatile（非易失性）状态的过程。
在前端应用程序中，持久化通常意味着在浏览器的存储介质中存储数据，这样即使用户关闭了浏览器或计算机，也可以恢复应用程序状态。
Redux 中的持久化
Redux 中的持久化主要是将 Redux store 中的状态保存在持久性存储介质中。Redux 中的状态是纯 JavaScript 对象，因此可以方便地序列化和反序列化，例如 JSON 格式。
Redux 中有很多库可以用来处理持久化，下面我们会逐一介绍它们。
1. redux-persist
redux-persist 是 Redux 的一个持久化库，它使用了 Redux Middleware 的概念，将 Redux 状态持久化到磁盘中。它提供了多种存储引擎，包括 localStorage、sessionStorage、IndexedDB、AsyncStorage 等。
安装：
npm install redux-persist
使用：
-- -------------------- ---- -------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ---------------------------- -- -------- -- ------------ --- ---
----- ------------- - -
---- -------
--------
--
----- ----------- - -----------------
-- ---- --------
---
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--2. redux-persist-immutable
redux-persist-immutable 是基于 redux-persist 的一个变体，其主要的目标是处理 Immutable 数据。
安装：
npm i redux-persist-immutable
使用：
-- -------------------- ---- -------
------ - ------------- -------------- - ---- --------------------------
------ ------------------ ---- ------------------------------------
------ ------- ---- ----------------------------
----- ------------- - -
---- -------
--------
----------- -----------------------
--
----- ----------- - -----------------
-- ---- --------
---
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--3. redux-storage
redux-storage 是一个独立的 Redux 持久化库，它是基于 redux-persist 的，但提供了更多的存储引擎，例如 sessionStorage 等。而且它还提供了一个简单的存储引擎 API，让你轻松地实现自己的存储引擎。
安装：
npm install redux-storage
使用：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------------ - ---- ---------------
------ ------------ ---- -----------------------------------
------ - --------------- - ---- -------
------ - ------------------- - ---- --------------------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------
------ - ------ ----------- - -------------- -
--------
------ -----
-
-
----- ------ - ---------------------------
----- ---------- - ----------------------------
----- ----- - ------------
--------
---------------------------------------------------
-
----------------
--------- --------------
---- --
------------
-------------------------------
--4. redux-persist-expire
redux-persist-expire 也是基于 redux-persist 的一个变体，其目的是过期清除存储的 key/value，避免浪费存储空间。
安装：
npm install redux-persist-expire
使用：
-- -------------------- ---- -------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ---------------------------- -- -------- -- ------------ --- ---
------ - -------------------- - ---- -----------------------
----- ------------- - -
---- -------
--------
---------- ----------- ------------ -- -------------
--
----- ---------- - ------ - - ---- ----- -- ------- -- -
------ ------------- -
--------
------ ------
-
--
----- ------------- - ----------------------
---------- ------- --- ------
------------- -----
------------- -----
-------------- -----
---
----- ----------- - ---------------
--------------
----------------- ---- ----------- -------- ------------- --
--
----- ----- - ------------------------ ------------------------
----- --------- - --------------------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--5. localForage
localForage 是一个快速、简单的库，用于在 WebSQL、IndexedDB 和 localStorage API 上提供异步的存储方法。
安装：
npm install localforage
使用：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ -------------------- ---- ------------
------ ------------ ---- --------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------------------
--------------------------------
------------------ -
-------- ------------ -- -- ------- --- -----------
---- --------
--
-
-总结
无论您使用哪种库来处理 Redux 持久化，都要确保当前使用的存储引擎适合您的特定需要。专注于提供正确的配置，以便在持久化方面获得最佳体验。希望这篇文章对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653ddfa27d4982a6eb785c87