如果你在使用 Redux 进行状态管理时，遇到了需要持久化存储 Immutable.js 数据结构的问题，那么 redux-storage-decorator-immutablejs 就是为你准备的解决方案。本文将详细讲解 npm 包 redux-storage-decorator-immutablejs 的使用方法，并提供示例代码供大家参考。
为什么要使用 redux-storage-decorator-immutablejs？
Redux 很好地支持了持久化存储，但是默认只支持简单的普通对象。如果需要存储 Immutable.js 数据结构，Redux 就无法自动实现了。因此，redux-storage-decorator-immutablejs 就应运而生。
redux-storage-decorator-immutablejs 是一个 Redux Storage 库的 decorator，用于将 Immutable.js 数据结构转换为普通对象以实现 Redux 持久化存储。此外，它还支持传递额外的自定义的 reviver 和 replacer 函数以实现更高级的转换需求。
如何使用 redux-storage-decorator-immutablejs？
- 安装 redux-storage-decorator-immutablejs
npm install redux-storage-decorator-immutablejs --save
- 创建存储 enhancer
使用 redux-storage-decorator-immutablejs，并需要将其作为 Storage Enhancer 来实现。我们可以将其与其他 Redux 存储 enhancer 进行结合，生成一个新的 enhancer 来覆盖原始 enhancer。最终返回的 enhancer，就是一个被转换后的 Immutable.js 对象。
示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ --------- ---- ------------
------ - --------------- --------------- - ---- ----------------
------ ------- ---- ---------------------------
------ ------------------ ---- ------------------------------------
------ ---------------- ---- --------------------------------------
------ ----------- ---- ----------------
----- ------------- - -
----------- -----------------------
---- -------
--------
--
----- ------------ - ----------------
----- ------------- - -
---------- -------------------
---- -------
--------
---------------- -------------- -------------- -- ----------------------------------
--
----- ----- - ------------
------------
-------------
-------------------------------------------------- -- --
-----------------------
-----------------
----
--
---------------------- ---------------在上面的代码中，我们首先通过 redux-persist 的 createPersistor() 方法创建了一个持久化存储对象。然后，我们使用 redux-persist-transform-immutable 将 Immutable.js 数据结构转换为简单的对象，并将转换后的数据传递给 redux-storage-decorator-immutablejs。最后，我们将 redux-storage-decorator-immutablejs 视为 Redux 存储 enhancer，并将其与其他 enhancer 进行合并。最终，我们将覆盖原始 enhancer 并返回从 Redux 存储中取出的 Immutable.js 对象。
- 存储 Immutable.js 数据结构
在 Redux 中存储 Immutable.js 数据结构就像存储普通的 JavaScript 对象一样简单。只需要将其放入 store 对象中即可。
示例代码：
-- -------------------- ---- -------
------ - ---- ------ - ---- ------------
----- ------------ - -----
-------- --
------ --------
- --- -- ----- -------- ---------- ---- --
- --- -- ----- -------- ---------- ----- --
---
---- 从存储中恢复 Immutable.js 数据结构
当我们通过 Redux-persist 从存储中恢复 Immutable.js 数据结构时，必须确保正常编写 stateReconciler 函数。
示例代码：
const persistConfig = {
enhancers: [storageDecorator],
key: 'root',
storage,
stateReconciler: (inboundState, originalState) => originalState.merge(inboundState),
};在上述代码中，我们定义了一个 stateReconciler 函数，该函数将上一个版本的保存的 state（inboundState）与当前的 store 中存储的 state（originalState）进行合并。由于 Immutable.js 对象的不变性，这种合并是领域特定的。在安装 redux-storage-decorator-immutablejs 后，请务必正确编写 stateReconciler 函数。
总结
redux-storage-decorator-immutablejs 是一个用于将 Immutable.js 数据结构转换为普通对象以实现 Redux 持久化存储的库。通过使用这个库，我们可以在持久化存储时，不必担心 Immutable.js 对象的不变性，并且在从存储中恢复这些对象时也可以轻松实现代码。在实际项目中，如果需要存储 Immutable.js 数据结构，我们强烈建议使用 redux-storage-decorator-immutablejs。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c25