前言
在前端开发中，状态管理是一个必备的技能。Redux 是一个非常流行的状态管理库，它可以帮助前端开发者轻松管理状态并保持应用程序的一致性。redux-persist 是一个扩展库，它可以使我们将 Redux 状态保存到本地存储中，以便在浏览器快照，重新加载和持久化中使用。在使用 redux-persist 时，提供一个变换器可以很方便的实现数据的过滤。在这里，我要向大家介绍一个名为 redux-persist-transform-filter-immutable 的 npm 包，它是一个基于 Redux 状态存储优化的包，可以很方便地实现变换器与 filter。
什么是 redux-persist-transform-filter-immutable
redux-persist-transform-filter-immutable 实际上是一个 redux-persist 的变换器。它可以方便的增加如下功能：
- 过滤异动数据过滤：不保存全局状态中需要过滤的数据。
- 支持 Immutable.js 数据结构：序列化和反序列化时不影响数据结构。
当我们使用 redux-persist 与不可变数据结构时，每当状态呈现更改时，将会重新创建一个新的对象。这会使持久化的过程变得更加困难，性能也会有所降低。redux-persist-transform-filter-immutable 提供了一种有效的解决方案，它利用了 Immutable 数据结构的自身优势，以进行快速的状态恢复和持久化。
如何安装 redux-persist-transform-filter-immutable
要使用 redux-persist-transform-filter-immutable ，我们首先需要在项目中引入 redux-persist 与 immutable。
npm install redux-persist immutable --save
同时，我们也需要下载 redux-persist-transform-filter-immutable。
npm install redux-persist-transform-filter-immutable --save
安装完成后，我们可以开始使用它。
使用 redux-persist-transform-filter-immutable
- createFilter(filterConfig, reducerKey)
filterConfig 是一个描述过滤消息的映射。reducerKey 是需要在过滤中排除的 reducer 的关键字。
import { createFilter } from "redux-persist-transform-filter-immutable";
const filter = createFilter({
"exclude": ["auth", "navigation"]
//这里指示在持久化中忽略 `auth` 和 `navigation` reducers。
});- createTransform(inbound, outbound, config)
inbound 和 outbound 是转换器的入站和出站方法。config 是一个对象，用于配置如何使用变换器。
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------------------------
------ - ------ - ---- ------------
----- -------- - -------- ----- ---- ---
----- ------- - ------- -- ------
----- -------- - ------- -- ---------- ----- ----- ---
----- --------- - ------------------------ --------- -
---------- ---------------
------- ---------- ----------------- ---------
---------- ----
---------- --------- ----- ------
---- persistReducer(config, reducers)
config 是一个对象，用于配置如何存储 Reducer 产生的状态。reducers 是 Single Reducer Function 或 Reducer Function Object 的组合。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ------------- - -
---- -------
-------- --------
----------- ------------
------------- ----------
---------- --------------
-------------- -----------
--
------ ------- ----------------------------- ----------至此，我们的过滤变换器就已经启用了。
完整示例
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------------------------
------ - ------------ - ---- -------------------------------------------
------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ - ------ - ---- ------------
------ -------- ---- -----------------------
----- ------ - --------------
---------- -------- -------------
------------- ------ - ------------ ---------
---
----- -------- - -------- ----- ---- ---
----- ------- - ------- -- ------
----- -------- - ------- -- ---------- ----- ----- ---
----- --------- - ------------------------ --------- -
---------- ---------------
------- ---------- ----------------- ---------
---------- ----
---------- --------- ----- ------
---
----- ------------- - -
---- -------
-------- --------
----------- - ------- --------- --
------------- --------- -- -------
---------- --------------
-------------- -----------
--
------ ------- ----------------------------- ----------结论
redux-persist-transform-filter-immutable 是一个很实用的 npm 包。它是在 redux-persist 基础上的一个增强版本，旨在解决 redux-persist 无法方便地实现自定义变换器和过滤器的问题。尽管它在某些情况下可能不是最佳选择，但它仍然是用于开发和快速原型设计的有用工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0749