Redux 是一个 JavaScript 状态管理库，而 redux-persist 可以帮助我们将 Redux 的状态持久化到本地存储中，以免用户在刷新或重新启动应用时丢失状态。然后就有一个 npm 包叫做 redux-persist-seamless-immutable，它结合了 redux-persist 和 seamless-immutable，提供了更好的性能和易用性。本文将详细介绍 redux-persist-seamless-immutable 的使用教程。
安装
使用 npm 安装 redux-persist-seamless-immutable：
npm i redux-persist-seamless-immutable
配置
在 Redux store 中配置 redux-persist-seamless-immutable，需要将一个 immutable 的 state 转换为一个普通的 JavaScript 对象，再将其传递给 redux-persist。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ ------------------ ---- --------------------------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ----------- ----------------------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------------------------ ----- --------- - --------------------
在上面的代码中，我们定义了一个名为 persistConfig 的对象，它将配置 redux-persist。key 属性指定了存储在本地存储中的对象的名称，storage 属性指定使用 localStorage 作为存储引擎。transforms 属性使用了 redux-persist-transform-seamless-immutable 包提供的 immutableTransform 转换器，用于对 immutableJS 类型的 state 进行转换。最后，我们使用 persistReducer 函数来应用 redux-persist 的配置，并将其传递给 Redux store。
使用
在 React 组件中使用 Redux store 的方式和通常一样，不过需要增加一个表明将要使用本地存储状态的 redux-persist 范畴的 HOC：
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ - ---- ----------------
------ - ----------- - ---- -------------------------------------
----- --- ------- --------- -
-------- -
------ -
------------ -------------- ---------------------------------
--- ---- --- ---- ---
--------------
--
-
-
----- --------------- - ----- -- --
-- --- ----- -------- -- - ---- ------ -- -----------
-- -------- -- --- ----- --- --- --- --- ------- --------
-- ---- ------------------ -- ------ -- -- ---------
--------------- ------
---
----- ------------------ - ---
------ ------- ------------------------ -------------------------在上面的代码中，我们使用了 redux-persist 的 PersistGate 组件包装了我们的应用程序。PersistGate 组件的 loading 属性为空，而 persistor 属性是通过 props 传递的。我们还将 Redux store 的 persistedState 作为一个 prop 传递到组件中。
React 组件完全可以简单地通过 componentWillReceiveProps() 来使用这个 prop，但是我们可以使用 redux-persist-transform-seamless-immutable 包提供的 seamlessImmutableReducer 函数简化代码：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ - ------ - ---- ------------
------ - ------------------------ - ---- ---------------------------------------------
----- ----------------- - -------------------------------- ---------------
----- ------------ ------------ - ------- ---- ------- ------- -- -
------ ------------- -
--------
-- ----------------- -
------ ------------------------ --------
- ---- -
------ --------------
-
-
--在上面的代码中，我们定义了一个名为 seamlessImmutable 的变量，它使用 redux-persist-transform-seamless-immutable 包提供的名为 seamlessImmutableReducer 的函数，这个函数将连接 Redux 状态的部分定义为单独的 redux-persist transform。
注意，我们将 requiredStates 传递到 seamlessImmutableReducer(...) 中，这样它就可以创建 immutable 的子状态，而其他状态将保持原样。这样我们就使用了两个 Reducer。
最后，我们将 rootReducer 作为参数传递给 createStore(...) 函数，它将为我们创建一个新的 Redux store。
示例代码
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------- - ---- --------------
------ - ------------- -------------- - ---- ----------------
------ - ----------- - ---- -------------------------------------
------ ------- ---- ----------------------------
------ ------------------ ---- ---------------------------------------------
------ - ------ - ---- ------------
------ - ------------------------ - ---- ---------------------------------------------
-- -------
----- ------------ - --------
--------- ------
----- ---
---
----- ----------------- - -------------------------------- ----------
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ --------------------- ----------------- ------------------------
---- -----------------
------ --------------------- ------------------ ------------
--------
-- ------------ -
------ ------------------------ --------
- ---- -
------ --------------
-
-
--
-- -----------
----- ------------- - -
---- -------
--------
----------- -----------------------
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
-- ----- ---------
----- --- ------- --------- -
-------- -
------ -
------------ -------------- ----------------------
--- ---- --- ---- ---
--------------
--
-
-
----- --------------- - ----- -- --
--------------- ------
---
----- ------------------ - ---
------ ------- ------------------------ -------------------------总结
redux-persist-seamless-immutable 是一款非常好用的 npm 包，可以提高 Redux 的性能和方便性。使用这个包需要做的只是在 Redux store 中配置和使用它，本文从配置和使用两个方面介绍了该包的使用，希望对您学习和使用该包有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f72238a385564ab67ca