前言
在前端开发中，使用 Redux 存储数据已逐渐成为一种趋势，但是随着应用的复杂度增加，Redux 中存储的内容也变得繁杂起来。在这种情况下，我们常常需要一个能够实现数据白名单过滤的工具，以便增加 Redux 存储的可维护性和可读性。redux-storage-whitelist-fn 就是这样的一个 npm 包，它可以帮助我们轻松地实现 Redux 数据的白名单过滤功能。
安装及使用
使用 redux-storage-whitelist-fn 之前，你需要先安装一些必要的依赖项：redux, redux-storage, redux-storage-decorator-immutable 和 redux-localstorage 。
npm install redux redux-storage redux-storage-decorator-immutable redux-localstorage --save
接着，安装 redux-storage-whitelist-fn 。
npm install redux-storage-whitelist-fn --save
引入
在你的 Redux store 中，你需要引入 redux-storage ，并且使用 engine() 函数创建一个新的存储引擎。请注意，在 engine 方法中，我们需要使用 createDecorator 方法以支持数据的不可变性。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ------- ---- ---------------- ------ --------------- ---- ------------------------------------ ------ ------ ---- ----------------------------- ------ ----------- ---- ------------- ----- ----- - -------------------- ----- ------- - ----------------------------- ----- ------ - ----------------------------------- ------ ------------------ ----- ----- - --------------------- ----- ---- - ----------------------------- ----------- ---------------- -- ------------------- -------- ---------- --------- -- ------------------- -- ---- -------- ---------
在过滤规则中，我们可以指定我们需要的数据模块，比如 'user' 模块，这意味着只有 'user' 模块的数据被允许存储到 localStorage 中。
过滤嵌套的对象
如果你的数据是类似于下面这样的嵌套对象，那么你需要使用 lodash 的 get() 方法来指定需要包括在白名单中的属性。
-- -------------------- ---- -------
-
----- -
--- ----
----- ------
-------- -
---- ---
-------- -
----- ----------
------- -------- ---------
-
-
--
-------- -
----- -----
--------- -----
-
-在这个例子中，我们需要包括 user.name、user.profile.age 和 setting.currency 这些属性。这时候，我们可以按如下方式创建一个配置对象：
const config = {
user: ['name', 'profile.age'],
setting: ['currency']
};
const filter = createFilter(config);在这个例子中，我们只包括了我们需要存储的属性，而其他的属性将被忽略掉。
总结
Redux 存储在前端应用中扮演着越来越重要的角色，但冗余和无效的数据会让我们失去对数据的掌控和理解。redux-storage-whitelist-fn 是一款出色的 npm 包，可以帮助我们轻松地实现数据白名单过滤功能，以提高数据的可维护性和可读性。本文介绍了如何安装和使用该 npm 包，并提供了丰富的示例代码，希望能帮助你在实际开发中更好地使用 redux-storage-whitelist-fn。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c3b