介绍
redux-sessionstorage-gion 是一个通过 Redux 来存储数据到浏览器的 sessionStorage 的 npm 包。通过该 npm 包，可以在 Redux 架构下维护一个 session 状态。同时，sessionStorage 必须保证页面在同一个浏览器的同一个页面中才可以共享。
安装
在使用 redux-sessionstorage-gion 之前，需要先安装 Redux。然后，在终端中运行以下命令即可安装 redux-sessionstorage-gion。
npm install redux-sessionstorage-gion --save
使用
在使用 redux-sessionstorage-gion 时，需要在 Redux 的 createStore 函数中传入一个 enhancer 参数，用于对 store 进行升级。
在 enhancer 中，需要传入一个已经配置好的 sessionStorageConfig 对象。sessionStorageConfig 对象包含了许多与 sessionStorage 相关的配置项，例如存储的键名（key），存储 state 的黑名单（blacklist）以及存储 state 的白名单（whitelist）等。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ---------------------------- ----- -------- - ------------------------------- ---------------------- ---- ------------ ---------- --------------------- ---------- -------------------- ---- ----- ----- - -------------------- ----------
配置项
key
- 类型：字符串
- 说明：sessionStorage 中存储的键名。
- 默认值：默认值为 ‘defaultReduxSession’
blacklist
- 类型：数组
- 说明：黑名单。数组内列出的 state 属性不会被存储到 sessionStorage 中。
- 默认值：默认值为空数组 []
whitelist
- 类型：数组
- 说明：白名单。如果定义了白名单，则只有数组内列出的 state 属性会被存储到 sessionStorage 中。
- 默认值：默认值为空数组 []
serialize
- 类型：自定义序列化函数
- 说明：用于将 state 对象进行序列化后再存储到 sessionStorage 中。通常情况下，state 对象会被转换成 JSON 字符串。
- 默认值：默认为 'JSON.stringify'
deserialize
- 类型：自定义反序列化函数
- 说明：与 serialize 函数相对应，用于将存储在 sessionStorage 中的字符串数据进行反序列化。
- 默认值：默认为 'JSON.parse'
示例
以下是一个简单的示例代码，演示了如何使用 redux-sessionstorage-gion。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- ----------------------------
----- ------------- - ----------------------
---- ------------
---------- ---------------------
---------- --------------------
---
----- -------------- - ------ - --- ------- -- -
------ ------------- -
---- --------------------
------ - --------- ----------------- --
--------
------ ------
-
--
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ - --------- ----------------- --
--------
------ ------
-
--
----- ---------- - -----------------------
----- ----------- - ------ - --- ------- -- -
----- ------------ - ----------------------------- --------
----- -------- - ------------- --------- -------- ------------ -- --------
------ - ----------- --
--
----- ------------ - -
-------- -
----------------- --
-
--
----- ----- - ------------------------ ------------- ----------- ---------------
-- -------- ------- ---- -- --- ----- -- ------- -----需要注意的是，示例代码中的 reducer 使用了 spread 操作符将新的 state 合并到原始的 state 对象中，这意味着使用 redux-sessionstorage-gion 而不是原生的 Redux，整个 state 都会存储到 sessionStorage 中。当然，使用了 blacklist 或 whitelist 属性可以更加灵活地控制存储的内容。
总结
本文介绍了 npm 包 redux-sessionstorage-gion 的使用方法，以及其主要的配置项。通过阅读本文，你将学习到如何使用 redux-sessionstorage-gion 实现 sessionStorage 的存储功能，并在 Redux 架构下实现 session 状态的管理。在实际开发中，我们可以根据不同的业务需求，灵活设置 redux-sessionstorage-gion 的黑白名单，实现更加精细化、优化化的状态管理和存储。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b0b