简介
redux-sessionstorage 是一个基于 Redux 的 session storage 状态管理工具。它允许你在你的 Redux store 中存储一些状态数据，这些数据将会被持久化到浏览器的 sessionStorage 中，以此保证数据在页面刷新后不会丢失。
安装
使用 npm 安装 redux-sessionstorage：
npm install redux-sessionstorage
使用
redux-sessionstorage 的使用非常简单。我们只需要将其作为一个 middleware 添加到 Redux store 中即可。以下是一个典型的使用场景：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------- ---- -----------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
---------------
--
--
------ ------- ------按照上面的方式添加 middleware 后，我们就可以像使用普通的 Redux store 一样使用它了。我们可以使用 Redux 的 action 来修改状态数据，将它们存储到 sessionStorage 中，并且在需要时将其取回使用。
以下是一个简单的示例：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------ ----- ------- - ------------------------
-- -------
----- ------------ - - ----- -- --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ - --------- ----- -------------- --
--------
------ ------
-
--
------ ------- --------我们可以在上面的示例中看到，我们使用 Redux 的 createAction 方法来创建一个 action。通过这个 action，我们可以将传入的用户信息（即 payload）存储到 sessionStorage 中。下面是一个使用这个 action 的示例：
store.dispatch(setUser({ name: 'Alice', age: 25 }));在上面的代码中，我们将用户信息存储在了 sessionStorage 中。要取回这个信息，我们可以像这样使用：
const state = store.getState();
console.log(state.user); // { name: 'Alice', age: 25 }高级使用
在一些特殊的场合下，我们可能需要一些更高级的状态管理工具，比如我们需要在多个浏览器标签页之间同步状态数据。redux-sessionstorage 也提供了一些扩展功能来满足这些需求，比如默认情况下，redux-sessionstorage 只会将数据存储在当前的浏览器页面中。如果我们想要在多个页面之间同步数据，我们需要给每个页面一个唯一的名称，比如下面这样：
const store = createStore(
rootReducer,
applyMiddleware(sessionstorage('my_awesome_app')),
);在上面的代码中，我们给了 sessionstorage 一个名为 my_awesome_app 的名称，这样它就可以跨多个页面进行同步了。
除了上面的例子，redux-sessionstorage 还提供了很多高级用法，比如：
- 可以为每一个 sessionStorage 创建单独的 reducer。
- 可以选择只将某些 action 的数据存储在 sessionStorage 中。
- 可以设置 sessionStorage 的过期时间。
如果你想要了解更多关于 redux-sessionstorage 的高级用法，可以查看它的文档。
总结
在这篇文章中，我们介绍了如何使用 redux-sessionstorage 来实现 session storage 状态管理。我们学习了如何添加 redux-sessionstorage 中间件，并且使用 createAction 方法来创建 action，将数据存储在它所管理的 sessionStorage 中。除此之外，我们还了解了 redux-sessionstorage 的一些高级用法。希望这篇文章能够帮助你开始在你的 React 应用中使用 redux-sessionstorage，它可以帮你轻易地管理你的应用中的数据，让你的应用更加强大和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b0d