介绍
redux-ui-persistable 是一个能够将 Redux store 中的状态自动保存到本地存储或任何其他存储介质中的 npm 包。它能够将 Redux store 中的数据序列化后保存到指定的存储介质中，并在页面刷新或重新加载时自动将状态还原。
安装
通过 npm 安装 redux-ui-persistable。
--- ------- ------ --------------------
使用
- 导入
persistStateMiddleware和persistStateEnhancer。
------ - ----------------------- -------------------- - ---- -----------------------
- 在创建 Redux store 时应用
persistStateEnhancer。
------ - ------------ ---------------- ------- - ---- --------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------
----------------------------------------
----------------------
-
--- 添加
persistStateMiddleware中间件。
------ - ------------ ---------------- ------- - ---- --------
------ - ---------------------- - ---- -----------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------
----------------------------------------
----------------------
-
--- 配置存储介质。
使用 setStorageEngine 方法来配置存储介质。使用 localStorageEngine 方法可以将状态保存到本地存储。
------ - ----------------- ------------------ - ---- ----------------------- -------------------------------------
- 在 Redux store 中设置想要保存的字段。
------ - ------------ ---------------- ------- - ---- --------
------ - ----------------------- -------------------- - ---- -----------------------
------ ----------- ---- -------------
----- ----------------- - -
---- -------
---------- ---------
--
----- ----- - ------------
------------
--------
----------------------------------------
----------------------
-------------- --------------------
--
-
--以上代码将在存储中保存一个名为 root 的对象，其中仅包含来自 Redux store 中名为 auth 的状态。
示例代码
------ - ------------ ---------------- ------- - ---- --------
------ - ----------------- ------------------ - ---- -----------------------
------ - ----------------------- -------------------- - ---- -----------------------
------ ----------- ---- -------------
-- ------
-------------------------------------
-- ---------
----- ----------------- - -
---- -------
---------- ---------
--
-- -- ----- ----- --- --------------------
----- ----- - ------------
------------
--------
----------------------------------------
----------------------
-------------- --------------------
--
-
--结论
redux-ui-persistable 是一个非常好用的 npm 包，能够大大提高前端应用的用户体验。在应用此包时，你需要考虑存储介质的选择以及设计想要保存的字段。希望这篇使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5451ab1864dac669bd