在 React.js 的开发中，Redux 已经成为了必不可少的前端库之一，而 redux-persist-transform-immutable 是一个将 Redux 数据存储到浏览器中并保持不变形的 npm 包。那么我们该如何使用它呢？本篇文章将为你详细的讲解使用教程及示例代码。
redux-persist-transform-immutable 的安装
将 redux-persist-transform-immutable 安装到项目中，只需在终端输入如下命令即可：
npm install redux-persist-transform-immutable --save
redux-persist-transform-immutable 的配置
以下是一个基本的 Redux Store 配置，其中包含了 redux-persist-transform-immutable：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ - ------ - ---- ------------
------ - ------------ - ---- ---------------
------ --------------- ---- --------------
------ ----------- ---- -------------
------ ------------------ ---- ------------------------------------
----- ------------- - -
----------- -
--------------------
--
---- -------
-------
--
----- ---------------- - ----------------------------- -------------
----- ---------------- - ---------------
----- ----- - ------------
-----------------
---------
----------------
----------------
----------------
-
--
----- --------- - --------------------
------ - ------ --------- --上述代码中，我们通过引入 persistStore 和 persistReducer，对 redux 进行了持久化存储配置。同时我们加入了 transformImmutable()，这个函数起到了将 Redux 数据存储到浏览器中并保持不变形的作用。
redux-persist-transform-immutable 的使用
在上述代码中，我们使用了一个简单的 store，该 store 可以存储到本地存储中的所有数据。但是，我们如何在不影响应用程序的存储的情况下，删除某个部分的数据呢？
我们来看一个用法示例：
-- -------------------- ---- -------
------ - --- - ---- ------------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------
----- ------------ - -----
----- ----
---
-------- ---------- - ------------------------- ------- -
------ ------------- -
---- ----------
------ ------------------- -- -------------------------
---- --------
------ ---------------
---- ---------
------ -----
--------
------ ------
-
-
----- ----------- - -----------------
----
---
------ ------- ------------上述代码中，我们定义了一个名为 user 的 reducer，该 reducer 的初始状态被设置为 initialState.get('user')。该初始状态被设置为 null，表示当前用户未登录。
在 REHYDRATE case 语句中，我们将从 localStorage 中获取数据并将其存储在 user 属性中。
当用户成功登录时，我们会将用户数据存储到 user 中，并触发 LOGIN action。
当用户注销时，我们将 user 设置为 null，并触发 LOGOUT action。
redux-persist-transform-immutable 的结尾
使用 redux-persist-transform-immutable 可以很好的解决 Redux 数据存储的问题，让我们的应用程序数据得到保护，并有效清除不需要的数据。
如果你也正在开发一个应用程序，并想要使应用更加人性化和精致，那么 redux-persist-transform-immutable 将会是你的不二之选。
以上就是本文对 npm 包 redux-persist-transform-immutable 的使用教程及示例代码的详细介绍，希望能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc4