简介
Redux-Module-Local-Storage 是一个可以让 Redux 的数据存储在 localStorage 中的 npm 包。使用这个包可以大大简化前端开发中数据存储的流程。想要深入了解这个包的使用方法，请继续阅读本文。
安装
首先需要在项目目录下安装 Redux 和 Redux-Module-Local-Storage。可以使用 npm 或 yarn 安装。
npm install --save redux redux-module-local-storage yarn add redux redux-module-local-storage
使用
Redux 是一个状态管理框架，很多应用都会借助于它来管理数据，Redux-Module-Local-Storage 则是为了存储 Redux 中的数据而生。下面将介绍如何使用这个包。
初始化
与 Redux 类似，需要先初始化创建一个 localstorage 存储数据对象。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------- -- ---------------------------- - ---- ----------------------------- ----- ------- - -------------------- ----- ----------------- - -------------------------------------- ----- ------------ - --- ----- ------- - ------ - ------------- ------- -- - -- ------- ------- -- ----- ----- - -------------------- ------------------------------------
在这里，我们使用 createLocalStorageMiddleware 创建一个将数据存储到 localStorage 中的中间件，并在创建 Redux 的 store 时使用 applyMiddleware 将其加入到中间件中。
定义默认值
需要在定义定义默认值的地方使用 withLocalStorage 方法替换。
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------------
----- ----------- - - -------- -- -
----- ------- - -----------------
------ - ------------ ------- -- -
------ ------------- -
---- --------------
------ - --------- -------- -------------- --
--------
------ ------
-
--
--------------
--withLocalStorage 接受2个参数，一个是 reducer 函数，一个是用于存储数据的 key 值。
在这个代码片段中，我们将默认数据 { message: "" } 与之前的 reducer 函数传递到了 withLocalStorage 方法中，用于存储数据的 key 值是 myStorageKey，这个 key 值也需要在后面进行设置。
存储数据
在 reducer 文件中使用 saveState 方法存储数据。
-- -------------------- ---- -------
------ - --------- - ---- -----------------------------
----- ----------- - - -------- -- -
----- ------- - -----------------
------ - ------------ ------- -- -
------ ------------- -
---- --------------
----- -------- - - --------- -------- -------------- --
------------------------- ----------
------ ---------
--------
------ ------
-
--
--------------
--在这个代码片段中，我们将数据存储到 localStorage 中使用 saveState('myStorageKey', newState) 方法，第一个参数是用于存储数据的 key 值，第二个参数是更新后的 state。
读取数据
在需要使用存储到 localStorage 中的数据时，调用 loadState 方法即可。
import { loadState } from 'redux-module-local-storage';
const data = loadState('myStorageKey');
console.log(data);在这个代码片段中，我们获取了存储在本地的数据，并且打印到控制台上。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------- -- ----------------------------- ----------------- ---------- --------- - ---- -----------------------------
----- ------- - --------------------
----- ----------------- - --------------------------------------
----- ----------- - - -------- -- -
----- ------- - -----------------
------ - ------------ ------- -- -
------ ------------- -
---- --------------
----- -------- - - --------- -------- -------------- --
------------------------- ----------
------ ---------
--------
------ ------
-
--
--------------
--
----- ----- - -------------------- ------------------------------------
---------------- ----- -------------- -------- ------- ------- ---
----- ---- - --------------------------
------------------结论
Redux-Module-Local-Storage 是一个简单易用的数据存储 npm 包，能够方便地在 Redux 中存储数据。本教程展示了使用的实际案例，希望对大家学习及实际开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da081e8991b448db5be