在前端开发中，redux 及其相关的工具库已经变得愈发重要。其中，redux-storage 是一个方便地管理应用状态的工具库，允许我们将应用状态存储在浏览器的本地存储中，同时也提供了一些用于控制状态存储的关键入口。而 redux-storage-decorator-immutable-filter 库则是对 redux-storage 库进行了扩展，将不可变（immutable）状态树中的一些特定部分进行持久化存储，这为前端状态管理提供了更多的选择与灵活性。
本文将简单介绍 redux-storage-decorator-immutable-filter 库的使用方法，并且提供一些示例代码来帮助你更好地理解这个库的核心概念和使用方式。
概述
redux-storage-decorator-immutable-filter 库是一个用于持久化存储不可变状态树的库。它可以对某些不可变状态树的部分进行持久化存储，而其他部分则保持不变。通过这种方式，我们可以在使用 redux 做状态管理的同时，更好地实现状态的持久化。
安装
在使用 redux-storage-decorator-immutable-filter 库之前，首先需要在你的项目中安装这个库。
npm install redux-storage-decorator-immutable-filter --save
使用
首先，在使用 redux-storage-decorator-immutable-filter 库之前，我们需要使用 redux-storage 库来定义一个存储引擎。这里，我们创建一个本地存储引擎，使用 redux-persist 库来实现持久化存储：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ ------ --------------------- ---- --------------------------- ------ - --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ---------- ------------------ -- ---- -------------- ---- -- --------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- -------------- - --------------- ---- -- - ----- ---------- - -------------------------------------------- ----- ----- - ----------------------------- ------------- ------------ ----- --------- - -------------------- ------ - ------ --------- -- --
接着，我们可以通过使用 redux-storage-decorator-immutable-filter 对需要持久化存储的部分进行筛选。下面是一个筛选示例：
-- -------------------- ---- ------- ------ ------ ---- ------------------------------------------- -- ------ ----- -- --- ----- -- ---- -- ------- ----- ---------------- - ---------------------------- ----- ------ - ---------------------------- -- ------ ---- ------- ------ ----- -------------- - ------------------------- -- ---- ---- ------ ------- --- ------ ----- ----------------- - ------------------- -------------- ---
在这个示例中，我们使用 filter 将部分 state 进行持久化存储。其中 ['auth','settings'] 是一个需要进行存储的 state 子集。
示例
我们来看一个完整的示例代码，以便更好地理解 redux-storage-decorator-immutable-filter 库是如何工作的。
首先，我们在入口文件中创建存储引擎、筛选器以及存储中间件：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ ------ --------------------- ---- --------------------------- ------ - --------------- - ---- -------- ------ ----- ---- -------------- ------ ------- ---- ------------- ------ ------ ---- ------------------------------------------- ----- ------------- - - ---- ------- -------- ---------- ------------------ -- ---- -------------- ---- -- --------- -- -- ------ ------- ------ ----- ------ - ------------------------ -- ------ ------ --- ------ ----- ---------------- - ------------------------ -- ------ -------- ------ ----- -------------- - ------------------------- -- ------ --------- ------- ---- -------- ------ ------- -- ------ ----- ---------------- - ----------------------------- --------- ----- ---------------- - --------------------- -- ------- ---- ----- ----------------- --------------- --- ----- ------- -- ------ --- ----- ---------- - ----------------------------------------- ------ ----- ----- - ----------------------------- ------------ ------ ----- --------- - --------------------
接下来，创建 redux 状态管理中的 action、reducer 以及 store：
-- -------------------- ---- -------
------ ----- ----------- - -
------------ --------------
--------------- ----------------
--
------ -------- ------------------ -
------ - ----- ------------------------ -------- - ------- ------ - --
-
------ -------- --------------- -
------ - ----- -------------------------- --
-
----- ------------ - -
------- --
-
-------- --------------------- --- - ------------- ------- ----- --- -
------------------- -
---- ------------------------
------ - ------- --------------------- --
---- ---------------------------
------ - ------- -- --
--------
------ ------
-
-
----- ----------- - -----------------
-------- --------------
--
------ ------- ------------最后，在组件中使用 store 和 actions：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ----------- ------------- - ---- --------------
----- ---------------- ------- ------------------------------------- ----------------------- ------------------ -
---------------- - -- -- -
----- - ---------- - - -----------
---------------- ------
-
----------------- - -- -- -
----- - ------------- - - -----------
----------------
-
-------- -
----- - ------ - - -----------
------ -
-----
------- --- ------------
------- - -
------- ------------------------------------------------
- - -
------- ------------------------------------- -- ---- ------------
--
------
--
-
-
----- --------------- - ------- -- --
------- --------------------
---
----- ------------------ - ---------- --
--------------------
-----------
-------------
-- ----------
------ ------- ------------------------ --------------------------------------通过以上示例，我们可以较好地了解 redux-storage-decorator-immutable-filter 的使用方式，同时也掌握了使用 redux 快速进行前端状态管理的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c24