在现代 web 应用开发中，使用状态管理工具是必不可少的。而 Redux 作为一种流行的状态管理工具，它的设计目标是为了方便开发者管理应用的状态并且可以实时响应用户操作。但是，用户可能会在应用关闭后再次打开时要求恢复上次的状态。这个时候，常规的 Redux 状态管理就不能很好地解决问题了。面对这种问题，Redux Persist 库应运而生。
Redux Persist 是 Redux 的一个插件，它会在内存中自动缓存 Redux 的状态，并且可以将这个状态数据持久化到本地存储中，在下次打开应用时可以恢复上次的状态。Redux Persist 内置了对多种存储引擎的支持，而且它非常灵活，开发者可以根据自己的实际情况来选择适合自己的存储引擎。
如何使用 Redux Persist
安装 Redux Persist
npm install redux-persist
创建 Redux Persist 配置文件
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ----- ------------- - - ---- ------- ------- - ----- ---------------- - ----------------------------- ------------创建 Redux Persist Store
import { createStore } from 'redux'; import { persistStore } from 'redux-persist'; const store = createStore(persistedReducer); const persistor = persistStore(store);将 Redux Persist 集成到 React 应用
-- -------------------- ---- ------- ------ - -------- - ---- -------------- ------ - ----------- - ---- -------------------------------------- ----- --- - -- -- - ------ - --------- -------------- ------------ -------------- ---------------------- -------- -- -------------- ----------- -- -
存储引擎
Redux Persist 支持多种存储引擎。以下是一些最受欢迎的存储引擎。
Web Storage
这是利用浏览器提供的 Web 存储 API (localStorage 和 sessionStorage) 实现的存储引擎。使用 Web Storage 作为存储引擎最常见，简单易用。
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- -- --------------------------- ----- ------------- - - ---- ------- -------- -- ------ ------- ----------------------------- -------------
cookieStorage
该存储引擎将状态存储在浏览器 cookie 中。在需要允许 cookie 的情况下，这可以是一种很好的简单存储选项。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ ------- ---- -----------------------------------
----- ------------- - -
---- -------
--------
-------- ----------
-------- --- --------------- - -- - ------
--
------ ------- ----------------------------- -------------AsyncStorage
这是一个 React Native 应用程序中使用的存储引擎。AsyncStorage 是一个简单的异步存储系统，旨在在 React Native 应用程序中存储简单的键值对数据。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
------ ------------ ---- ----------------------------------------
----- ------------- - -
---- -------
-------- -------------
---------- --------- -- ----- ---- ------ ----- -- ------------
--
------ ------- ----------------------------- -------------不完全深度保存
Redux Persist 储存的数据只是一个普通的 JavaScript 对象，它保存成 JSON 格式。因此，当您尝试使用它来永久保存大型、具有嵌套属性的对象时，您将可能遇到意想不到的问题。但是，有一些选项可以帮助您配置 Redux Persist 以解决这些问题。
深度
可以通过更改键路径的方式限制保存对象的深度，以此来避免存储过于复杂的数据。
-- -------------------- ---- -------
----- ----------- - -----------------------
----- ------------- - -
---- -------
--------
---------- ---------
----------- -
----------------
------- -- ------ -- ----------------- -----
------- -- ---------------------- -- - ----- --------
- ---------- - ----------------- - - -- --- --------------- ----
-
-
--
----- -------------- - ----------------------------- -------------白名单 / 黑名单
您可以使用白名单和黑名单来控制保存状态属性的决策，因为 Redux Persist 只对黑名单以外的白名单中列出的属性进行检查并保存。
const persistConfig = {
key: 'root',
storage,
whitelist: ['login', 'ui'], // 只期望 `login` 和 `ui` 这两个 state sliced 数据在进行序列化・反序列化时被执行
};
const persistReducer = persistReducer(persistConfig, rootReducer);转换
您也可以为需要自定义序列化和反序列化的自定义 Redux 存储状态提供转换。例如在存储时地图键和值被墨检而在读取时被解密。
-- -------------------- ---- -------
------ - --------------- - ---- ----------------
------ - -------- ------- - ---- ----------------
----- ----------- - -----------------------
----- ---------------- - ----------------
-------------- ---- -- -
------ ----------------------
--
--------------- ---- -- -
------ -----------------------
-
--
----- ------------- - -
---- -------
--------
---------- ---------
----------- ------------------
--
----- -------------- - ----------------------------- -------------关于存储安全问题
虽然 Redux Persist 使得我们的应用程序的状态数据持久化变得容易，但也有存储安全问题。将状态数据推送到客户端缓存中可能会增加引起数据成泄露的安全风险。
结论
使用 Redux Persist，您可以轻松存储并恢复 Redux 应用程序的状态数据，并且可以根据实际情况选择不同的存储引擎来实现这些功能。但是，开发者也需要对存储的安全性有所考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efeb9c6fbf96019731528e