redux-storage 是一个 Redux 的中间件包，它可以将 Redux Store 中的状态持久化到本地存储中。本文将为您详细介绍如何使用 redux-storage，以及如何在您的项目中使用它。
安装
在使用 Redux 前，您需要先在您的项目中安装它。您可以使用 npm 或者 yarn 来安装。
npm install --save redux-storage # 或者 yarn add redux-storage
使用
使用 redux-storage 的第一步是创建一个存储引擎，它将用于将 Redux Store 中的状态持久化到本地存储中。redux-storage 提供了几个内置的存储引擎，在这里，我们将使用 localStorage 存储引擎。要创建 localStorage 存储引擎，您可以使用以下代码：
import createEngine from 'redux-storage-engine-localstorage';
const engine = createEngine('my-save-key'); // Key must be unique across your application接下来，我们需要创建一个 redux-storage 中间件，并将其传递给 Redux 的 createStore 函数：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------- - ---- ---------------- ------ - ------------------- - ---- --------------------------- ------ ----------- ---- ------------- ----- ----------------- - ------------------------- ----- ----- - ------------ ------------ ------------------------------------------------------- --
现在，Redux Store 中的状态就会自动保存到 localStorage 中了。如果您想要在页面刷新或者浏览器关闭后，自动从 localStorage 中恢复 Redux Store 中的状态，您需要使用 redux-storage 的 load 函数：
import { load } from 'redux-storage';
load(engine).then((state) => {
console.log('Loaded state:', state);
});这将从 localStorage 中加载状态，并将其以 Promise 形式返回。您可以将 Promise 解析后，将状态传递给 Redux Store，实现自动恢复：
load(engine).then((state) => {
store.dispatch(replaceState(state));
});示例代码
以下代码展示了如何将 redux-storage 与 Redux Store 结合使用。在这个示例中，我们在 Redux Store 中存储一个计数器数字，并将其显示出来。当您刷新页面或者关闭浏览器时，计数器数字会被自动保存，并在重新加载页面后被自动恢复。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ---------------- - ---- ----------------
------ - ------------------- - ---- ---------------------------
------ ------------ ---- ------------------------------------
------ - ---- - ---- ----------------
------ ----------- ---- -------------
----- ------ - ----------------------------
----- ----------------- - -------------------------
----- ----- - ------------
------------
-------------------------------------------------------
--
------------------------- -- -
------------------------------------
---
----- --------- - ------------
-------- ----------- -
------ - ----- --------- --
-
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ----------
------ - ------ ----------- - - --
--------
------ ------
-
-
-------- --------- ------ --------- -- -
------ -
-----
---------- ------------
------- --------------------------------------
------
--
-
----- ----------- - --------------------------------
----------------
--------- --------------
-------- --
------------
-----------
--结论
Redux Storage 是一个强大的 Redux 中间件包，它可以帮助您将 Redux Store 中的状态持久化到本地存储中。本文为您介绍了如何使用 redux-storage，以及如何在您的项目中使用它。如果您还没有尝试过使用 redux-storage，那么现在就是一个好的时机，去使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c02