简介
redux-storage-engine-localforage 是一款可以帮助开发者在 Redux 中使用 localForage 实现持久化存储的 npm 包，具有易用性和可配置性。
为什么要使用 redux-storage-engine-localforage？
在 Redux 应用中，数据的持久化是一个十分重要的问题，例如保存用户的登录信息或者上下文信息，这时候我们需要使用一些持久化的手段来保存数据，而 redux-storage-engine-localforage 就可以很好的解决这个问题。
如何使用 redux-storage-engine-localforage？
安装
使用 npm 安装 redux-storage-engine-localforage
npm install redux-storage-engine-localforage --save
创建引擎
在创建 store 的时候，需要指定使用 localforage 来进行数据的存储和读取，以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------- -------------- - ---- ---------------
------ ------------- ---- ----------------------------------
----- ----------- - ------- ------- -- -
------ ------------- -
-- ---- ------- ----
--------
------ -----
-
-
----- ------------- - -
---- -------
-------- --------------
-
----- ---------------- - ----------------------------- ------------
------ ----- ----- - -----------------------------
------ ----- --------- - -------------------其中，使用 redux-persist 的 persistReducer API 把 localForage指定为 redux-persist 存储引擎。
可以看到，整个配置过程都非常简单，在使用时只需要引入即可。
深入了解 redux-storage-engine-localforage
配置
redux-storage-engine-localforage 支持的配置项非常丰富：
-- -------------------- ---- ------- - ---- ---------------------- -- -- ----------- ------- ------- ---------------------- -- ---- ------ ---------- ---------------- -- ------- -------- -- -- ---------- ------------ ----- --------------- --------- ----- -------- -- ----------- -- -- ----------- --- -
代码示例
下面我们通过一个示例来实现利用 redux-storage-engine-localforage 来实现一个简单的 todos 的存储和读取：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------- -------------- - ---- ---------------
------ ------------- ---- ----------------------------------
----- ------------ - -
------ ---
-
----- -------- - ----------
------ -------- ------- ------ -
------ -
----- ---------
-------- -----
-
-
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------- -
----- ----- - ---------------- ---------------
------ -
---------
------
-
-
--------
------ -----
-
-
----- ------------- - -
---- -------
-------- --------------
-
----- ---------------- - ----------------------------- ------------
----- ----- - -----------------------------
---------------------------- ---- ----
------------------- ----- -- -- -
----- ----- - ----------------
------------------ ----- ------------- ------
--总结
在使用 react 全家桶时，redux-storage-engine-localforage 是一款非常实用的工具，其通过简单的配置即可实现持久化存储的功能，可以大大节约开发时间和成本。同时，我们也需要时刻注意存储的安全性，以免数据被不当使用或外泄。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c29