在现代 web 开发中，Redux 成为了一个非常流行的状态管理库。在使用 Redux 时，我们通常需要手动编写一些代码来初始化应用的状态以及监听状态的变化。这种做法既费时又容易出错。本文将介绍一个非常实用的 npm 包：redux-load，它可以帮助我们简单、快捷地处理应用状态的初始化和持久化存储。
redux-load 简介
redux-load 是一个 Redux 中间件，它可以在应用启动时自动读取存储在本地的状态值，然后将其设置为初始状态。在整个应用生命周期中，redux-load 还会自动地把应用内最新的状态值存储到 localStorage 中，以便下次启动时可以重新加载它们。
除此之外，redux-load 还提供了各种扩展功能，例如将状态值存储到 sessionStorage 中，使用自定义序列化器对状态值进行序列化，使用自定义存储器将状态值存储到任意位置（例如 IndexedDB 中），以及将某些状态值排除在存储之外等。
安装和配置
首先，我们需要在应用中安装 redux-load：
npm install --save redux-load
接下来，在 Redux 创建 store 实例时，将 redux-load 中间件加入到 store 的中间件列表中：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ---- - ---- ------------- ----- ------- - ----------------- -- --- -- --- ----- ----- - ------------ -------- ----------------------- --
运行上面的代码后，我们就已经成功将 redux-load 中间件集成到 Redux 应用中了。
默认情况下，redux-load 会将所有的状态值都存储到 localStorage 中。如果我们想要使用 sessionStorage，可以这样设置：
applyMiddleware(load({ storage: 'sessionStorage' }))如果我们想要将所有的状态值排除在存储之外，可以这样设置：
applyMiddleware(load({ exclude: ['item1', 'item2'] }))更多的配置选项，我们可以在 redux-load 的 GitHub 主页中查看。
示例代码
下面是一个简单的计数器应用。它包含两个组件：一个显示计数器数值的文本和一个加一按钮，点击按钮时计数器数值加一。我们将使用 redux-load 来实现这个计数器的初始状态以及持久化存储。
index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ---- - ---- -------------
------ ------- ---- ------------
------ --- ---- --------
----- ----- - ------------
--------
-----------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--reducer.js
-- -------------------- ---- -------
----- ------------ - -
------ -
--
------ ------- -------- ------------- - ------------- ------- -
------------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- ------- --------------- -
-------- -
------ -
-----
--------- ----------------------
------- --------------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
------------ -- -- -
---------- ----- ----------- ---
-
---
------ ------- ------------------------ -------------------------注意事项
- 如果你想要在一些特殊场景中（例如同时打开两个页面时）避免状态冲突，可以切换使用使用 random 全局设置，这样每次刷新时 localStorage 中的 key 值都会重新生成，从而避免状态冲突。代码如下：
applyMiddleware(load({ storage: 'localStorage', random: true }))- 如果你使用了自定义序列化器或者自定义存储器，请务必注意处理二进制数据的问题。因为 localStorage 和 sessionStorage 只支持存储字符串类型的数据，而且 IndexedDB 只支持存储 ArrayBuffer 对象。因此，在使用这些存储器时，我们需要考虑如何将数据转换成二进制格式，并且在读取数据时将其还原为原始数据类型。
结论
redux-load 是一个非常有用的 Redux 中间件，它可以帮助我们解决状态初始化和持久化存储的问题，并且提供了许多可定制化的配置选项，使我们可以根据应用的需求来灵活地配置它。在实际项目中使用 redux-load 可以大幅简化代码量，节省开发时间，提高开发效率，非常值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a79