引言
在前端开发中，状态管理是非常重要的一环。为了保证状态能够长期保留，我们通常需要使用本地存储。而 wmg-redux-localstorage 就是一个可以帮助我们在 Redux 内使用本地存储的 npm 包。本文将为大家讲解使用该包的方法和技巧。
安装
使用 npm 安装 wmg-redux-localstorage 包：
npm install wmg-redux-localstorage --save
使用
我们可以在 Redux 的 createStore 函数中，传入 wmg-redux-localstorage 的 localStorageMiddleware 中间件，即可实现将 Redux 的 state 自动存入本地存储。示例代码如下：
import { createStore, applyMiddleware } from 'redux';
import { localStorageMiddleware } from 'wmg-redux-localstorage';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(localStorageMiddleware)
);默认情况下，wmg-redux-localstorage 使用 window.localStorage，但我们也可以使用其他存储方式。在创建 store 时，可以将 storage 参数传入 localStorageMiddleware 中间件。示例代码如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------------------- - ---- -------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
------------------------
-------- ---------------------
--
-
--当我们使用 localStorageMiddleware 中间件后，会自动帮助我们在 Redux 发生改变时，将 state 存入本地存储中。但是当我们应用启动时，我们需要将保存的 state 从本地存储中取出来，并应用到 store 中。在创建 store 时，我们需要首先从本地存储中读取数据，并传递给 rootReducer。示例代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------------- - ---- ------------------------- ------ ----------- ---- ------------- ----- -------------- - ----------------------------------------------- ----- ----- - ------------ ------------ --------------- --------------------------------------- --
在上述代码中，我们首先使用 JSON.parse 从本地存储中读取数据，并将结果传递给了 createStore 中的 persistedState 参数。然后，我们在 createStore 中传入了 persistedState 参数，即将初始 state 指定为本地存储中存储的 state。
指导意义
在使用 wmg-redux-localstorage 之后，我们不需要再手动地将 Redux 的 state 存入本地存储中。这样可以避免遗忘掉该步骤，从而导致应用出现问题。
使用 wmg-redux-localstorage 可以将我们的 state 存入 sessionStorage，避免长期占用 localStorage 而影响其他应用程序。
总结
wmg-redux-localstorage 是一个非常实用的 npm 包，可以帮助我们自动将 Redux 的 state 存入本地存储中。该包使用简单，但使用后可以提高我们的代码质量和效率。希望本文能够帮助各位读者更好地了解和使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e228c