前言
redux-localstorage-adapter 是一款能够让 Redux 应用程序自动将数据存储在本地存储中的插件。通过这种方式，应用程序能够在刷新或关闭浏览器后恢复数据状态。
本篇文章将介绍 redux-localstorage-adapter 的基本使用方法，并提供了一些示例代码，帮助读者更好地掌握该工具的使用。
开始使用
首先，安装 redux-localstorage-adapter：
npm install redux-localstorage-adapter --save
接着，在 Redux store 中配置 redux-localstorage-adapter：
-- -------------------- ---- ------- ------ -------------- ---- ---------------------------- ------ - ------------ --------------- - ---- ------- ----- ------- - ------ - --- ------- -- - -- --- - ----- ------- - ---------------- -- ---------- -- ----- ----- - ------------ -------- ----------------------------------- -
在上面的代码中，我们首先导入了 redux-localstorage-adapter 包和 Redux 的 createStore 和 applyMiddleware 方法。然后，我们定义了一个简单的 reducer，用于同时保存多个状态。
接下来，我们创建了一个存储适配器，使用 applyMiddleware 方法将其绑定到 Redux store 中。
最后，我们使用 createStore 方法创建了 Redux store。
常用选项
redux-localstorage-adapter 提供了许多选项，可以让开发人员轻松地自定义其行为。以下是一些常用的选项：
- key：存储的键名，默认为“redux”。
- serializer：序列化器，用于将存储的对象序列化为字符串，默认为 JSON.stringify。
- deserializer：反序列化器，用于将存储的字符串反序列化为对象，默认为 JSON.parse。
- debounce：设置 debounce 时间（毫秒），以防止频繁的本地存储访问，默认为 300 ms。
- mergeReducer：合并 reducer，为了支持多个 reducer，必须使用该选项。默认为 null。
小结
在本文中，我们介绍了 redux-localstorage-adapter 的基本使用方法和常用选项。通过使用 redux-localstorage-adapter，您可以轻松地使您的 Redux 应用程序在刷新或关闭浏览器后保持数据状态。
如果您想深入学习 redux-localstorage-adapter，请查看其官方文档。
示例代码
下面是一个存储多个状态的示例代码：
-- -------------------- ---- -------
------ -------------- ---- ----------------------------
------ - ------------ --------------- - ---- -------
----- ------- - ------ - - ------ -- -------- ------- ------- -- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
---- ----------------
------ - --------- -------- -------------- -
--------
------ -----
-
-
----- ------- - ----------------
---- ---------
--------- ----
--
----- ----- - ------------
--------
-----------------------------------
-
-- ------
------------------ -- ------------------------------
-- -----
---------------- ----- ----------- --
-- ----
---------------- ----- ---------------- -------- -------- -- -- ----- --
-- -----
---------------- ----- ----------- --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a96