前言
在前端应用中，我们经常需要使用一些状态管理工具来帮助我们管理复杂的应用状态。目前比较流行的状态管理工具之一是 Redux，它有一个很重要的特性就是能够实现状态的持久化存储，即在用户关闭应用后，下次重新打开应用时能够恢复上一次的状态。这个特性通常通过 Redux 的插件 redux-persist 来实现。
不过在实际项目中，我们往往会面临一些更为复杂的数据结构，例如嵌套的对象、数组等等，这时使用 redux-persist 就有些棘手了。为了解决这个问题，我们可以使用一个叫做 redux-persist-transform-compress 的 npm 包，它能够帮助我们实现更为复杂的数据结构的持久化存储。
安装和使用
要使用 redux-persist-transform-compress，我们需要首先安装它：
npm install redux-persist-transform-compress
然后在我们的 Redux 应用中引入 redux-persist-transform-compress：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ - --------------- - ---- -----------------------------------
------ ------- ---- ----------------------------
----- ------- - ------- ------- -- -
-- ---
--
----- -------------- - ----------------
-- -- -------------------------------- ---
--
----- ---------------- - ---------------
-
---- -------
--------
----------- ----------------
--
-------
--简单解释一下上面的代码：
- 我们使用 createTransform 方法创建了一个名叫 stateTransform 的对象，它是 redux-persist-transform-compress 的核心。我们可以在这个对象中配置 redux-persist-transform-compress 的一些选项和参数，后面我们会详细介绍。
- 在创建 persistedReducer 时，我们将 stateTransform 对象加入到了 transforms 属性中，这样就完成了 redux-persist-transform-compress 的配置和集成。此后我们就可以正常地使用 Redux 的 createStore、combineReducers 等方法来管理我们的状态了。
接下来我们详细介绍一下 stateTransform 的配置参数。
配置参数
在 redux-persist-transform-compress 中，大部分参数都是可选的，我们只需要选择需要的部分进行配置即可。
whitelist 和 blacklist
whitelist 和 blacklist 是 redux-persist-transform-compress 中最常用的两个参数，它们用于定义哪些状态需要被压缩，哪些状态不需要被压缩。
如果我们没有指定任何 whitelist 或 blacklist，那么 redux-persist-transform-compress 会默认压缩所有状态。
我们可以使用 whitelist 让 redux-persist-transform-compress 只压缩我们指定的状态：
const stateTransform = createTransform(
undefined,
undefined,
{ whitelist: ['counter'] }
);上面的代码片段中，我们让 redux-persist-transform-compress 只压缩名叫 counter 的状态。
同样，我们可以使用 blacklist 排除掉某些状态：
const stateTransform = createTransform(
undefined,
undefined,
{ blacklist: ['user'] }
);上面的代码片段中，我们不让 redux-persist-transform-compress 压缩名叫 user 的状态。当调用 redux-persist 的 persistStore 方法时，redux-persist-transform-compress 会根据我们指定的 whitelist 或 blacklist 进行相应的状态处理。
transforms
redux-persist-transform-compress 支持多个转换函数，你可以传递一个数组以对数据进行多次转换。下面是一个简单的例子：
-- -------------------- ---- -------
----- -------------- - ----------------
----------
-
------- -- --
---------
----- -
----- ------------------------------
---- -------------- - --
-
--
-
--上面的代码片段中，我们定义了两个转换函数。在第一个转换函数中，我们将 user 对象的 name 属性全部转换成大写，将 age 属性减去了 10。在运行 redux-persist 的 persistStore 方法时，redux-persist-transform-compress 会先将状态压缩，再依次执行上面定义的两个转换函数，最后将转换后的状态进行持久化存储。
serializer 和 deserializer
serializer 和 deserializer 是两个可选的参数，它们分别用于对状态进行序列化和反序列化操作。需要注意的是，如果我们自定义了 serialize 和 deserialize，那么它们必须是互逆的操作。
下面是一个例子：
-- -------------------- ---- -------
----- -------------- - ----------------
-- - ---- -----
-------------- ---- -- -
-- ---- --- ------- -
------ -----------------------------
-
------ -------------
--
-- ---- ------------- --
--------------- ---- -- -
-- ---- --- ------- -
------ --------------------------
-
------ --------------
-
--在上面的代码中，我们自定义了一个 stateTransform，并在其 inbound 属性中对 from 对象进行了序列化处理，outbound 属性中再进行反序列化处理。
接着，我们使用 redux-persist 的 persistStore 方法来持久化存储状态：
import { persistStore } from 'redux-persist';
import { createStore } from 'redux';
const store = createStore(reducer);
persistStore(store, { transforms: [stateTransform] });示例代码
最后，我们在一个简单的计数器应用中使用 redux-persist-transform-compress 来演示其应用场景：
-- -------------------- ---- -------
------ - --------------- ------------ - ---- ----------------
------ - --------------- - ---- -----------------------------------
------ ------- ---- ----------------------------
------ - ------------ --------------- - ---- --------
------ ------ - --------- --------- - ---- --------
------ -------- ---- ------------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - --
-
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
--
----- ----------- - ------ - - ----- ------- ---- -- -- ------- -- -
------ ------------- -
---- -------------- -
------ - --------- ----- ----------- --
-
---- ------------- -
------ - --------- ---- ---------- --
-
-------- -
------ ------
-
-
--
----- ----------- - -----------------
-------- ---------------
----- -----------
---
----- -------------- - ----------------
----------
-
-- - --- ------ ---------
------- -- --
---------
----- -
--------------
---- --------------------------
-
--
-
--
----- ---------------- - ---------------
-
---- -------
--------
---------- ------------
----------- ----------------
--
-----------
--
----- ----- - ------------------------------
----- ------- - -- -- -
----- ------- --------- - -----------------------------------------
------------ -- -
----- ----------- - ------------------ -- -
-----------------------------------------
---
------ -- -- --------------
-- ----
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
------ -
-----
----------- -------------
------- ------------------------------------
------- ------------------------------------
------
--
--
----- ---- - -- -- -
----- ------ -------- - --------------------------------
------------ -- -
----- ----------- - ------------------ -- -
-------------------------------
---
------ -- -- --------------
-- ----
----- ---------------- - --- -- -
---------------- ----- -------------- ----- -------------- ---
--
----- --------------- - --- -- -
---------------- ----- ------------- ---- -------------- ---
--
------ -
-----
----------------
-----
----- ------ ----------- ----------------- --------------------------- --
------
-----
---- ------ ----------- ---------------- -------------------------- --
------
------
--
--
----- --- - -- -- -
------ -
-----
-------- --
----- --
------
--
--
-------------------- --- --------------------------------
--------------------上面的代码实现了一个简单的计数器应用，其中包含了两个状态：counter 和 user。我们将 counter 存储在 local storage 中，而 user 不做持久化存储。在计数器加减的同时，我们还可以修改用户的姓名和年龄，然后重新加载应用后，计数器状态得以恢复，而用户的姓名和年龄则不会被保存。同时，我们还使用了 redux-persist-transform-compress 对 age 属性进行了转换处理，使其在持久化时加上了前缀 "my-age:"。
结语
redux-persist-transform-compress 是一个非常实用的 npm 包，它可以帮助我们在 Redux 应用中更加方便地实现持久化存储。使用 redux-persist-transform-compress 可以让我们同时实现多个复杂状态的持久化存储，从而更好地管理应用状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc5