前言
在现代 Web 应用中，数据的持久化是非常重要的一部分。redux-persist 是一款 Redux 库，可以用来将应用程序的 Store 持久化到本地存储中，以便在 Web 应用程序关闭或重新加载时恢复状态。@tandem.ly/redux-persist-transform-encrypt 利用了 Redux Persist 中的 transform 功能，提供了加密存储的功能，从而更加安全。
接下来，我们将会介绍如何使用这个 npm 包。
安装
使用 @tandem.ly/redux-persist-transform-encrypt 前，你需要先安装 Redux Persist。
npm install redux-persist
然后，你可以通过 npm 安装 @tandem.ly/redux-persist-transform-encrypt：
npm install @tandem.ly/redux-persist-transform-encrypt
使用
- 导入库
import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import { encryptTransform } from '@tandem.ly/redux-persist-transform-encrypt';
- 创建 persistConfig
const persistConfig = { transforms: [encryptTransform], key: 'root', storage, };
其中，transforms 选项是一个数组，可以传入多个“转换器”（transform）。encryptTransform 就是其中一个转换器。
- 创建 rootReducer
-- -------------------- ---- ------- ----- ------------ - - -- --- -- -------- ----------------- - ------------- ------- - -- --- - ------ ------- ----------------------------- -------------展开代码
- 创建 store
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - ------------- -------------- - ---- --------------- ------ ------- ---- --------------------------- ----- ------------- - - ----------- ------------------- ---- ------- -------- - ----- ----------- - ----------------------------- -------- ------ ----- ----- - ------------------------- ------ ----- --------- - --------------------展开代码
- 存取数据
通过以上步骤，你已经完成了对于 @tandem.ly/redux-persist-transform-encrypt 的基本配置。接下来可以通过 Redux 的 store（或 persistor）进行数据存取操作了。
import { store, persistor } from './configureStore'; store.dispatch({ type: 'ADD_TODO', text: 'Buy milk' }); // ... console.log(store.getState()); // 获取已经加密存储的 store 数据
示例代码
完整示例代码如下：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ - ---------------- - ---- --------------------------------------------- ----- ------------ - - ------ --- -- -------- ----------------- - ------------- ------- - ------ ------------- - ---- ----------- ------ - --------- ------ - --------------- - --- ----------- ----- ------------ ---------- ------ -- -- -- -------- ------ ------ - - ----- ------------- - - ----------- ------------------- ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - -------------------- ---------------- ----- ----------- ----- ---- ----- --- ------------------------------展开代码
结语
@tandem.ly/redux-persist-transform-encrypt 这个库为 Redux 应用程序提供了额外的安全性，保护了应用程序存储的数据。
在实际应用中，你可以使用 encryptTransform 来实现数据加密，从而更加客户的数据隐私的保护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673181e8991b448e3b50
