简介
在前端开发中，我们需要对数据进行持久化存储。Redux 是一个非常好用的状态管理库，但它默认并不提供数据持久化的功能。为了解决这个问题，社区中出现了很多存储引擎（storage engine）的包。
redux-storage-engine-cookies 是一个用于将 Redux 存储到 cookie 中的存储引擎。其优点是轻量级，无需后端支持，并带有安全措施。
本篇文章将介绍如何在 React-Redux 中使用 redux-storage-engine-cookies。
安装
redux-storage-engine-cookies 可以通过 npm 下载安装。
npm install --save redux-storage-engine-cookies
使用步骤
1. 使用 createCookieStorage 创建存储引擎
我们需要使用 createCookieStorage 函数来创建一个存储引擎。
import createCookieStorage from 'redux-storage-engine-cookies';
const engine = createCookieStorage({ key: '__my_key__' });createCookieStorage 函数需要传入一个对象，其中的 key 属性用于在 cookie 中存储我们的数据。需要注意的是，key 的值要具有唯一性，可以使用项目名称等类似变量来进行区分。比如上面例子中的 '__my_key__'。
2. 创建 middleware
在使用存储引擎之前，我们需要创建 middleware 以执行存储任务。
import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from 'redux-storage';
const middleware = createMiddleware(engine);
const store = createStore(reducer, applyMiddleware(middleware));在这里，我们使用了 redux-storage 提供的 createMiddleware 函数来创建 middleware。
3. 执行持久化存储
在 store 创建完成后，我们可以执行 engine.load() 以将 cookie 中的数据读取到 store 中。同时，我们可以在 store subscribe 中执行 engine.save(state) 以将 store 中的数据持久化存储在 cookie 中。下面是一段示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- - ---- ----------------
------ ------------------- ---- -------------------------------
-- -- ------ ----
----- ------ - --------------------- ---- ------------ ---
-- -- ----------
----- ---------- - -------------------------
-- -- -----
----- ----- - -------------------- -----------------------------
-- - ------ ------ ----- -
------------------
-------- -- ------------------- ----- ---- -----------
-- - ----- ---------- ------ -
------------------ -- -------------------------------最后，我们可以在组件中使用 connect 函数获取存储在 store 上的数据。
import { connect } from 'react-redux';
const ConnectComp = connect((state) => ({
count: state.count,
}))(({ count }) => (
<div>
<div>Count: {count}</div>
</div>
));安全措施
redux-storage-engine-cookies 虽然轻量级但也不会忘记安全性。它提供了以下措施以保障数据安全：
加密：存储引擎使用 AES 加密将数据写入 cookie 中。
签名：存储引擎在对数据签名后再将其写入 cookie 中。
过期时间：存储引擎存储cookie时，可设置过期时间，保障 cookie 的时效性。
总结
使用 redux-storage-engine-cookies，我们可以在前端应用中轻松地将 Redux 的状态持久化保存到 cookie 中。通过本文提供的步骤，您可以快速上手使用这个存储引擎，并在代码中增加安全措施，从而更好的保障数据的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c26