在前端开发中，我们经常需要在多个组件或页面之间共享数据。Redux 是一个流行的状态管理库，可以帮助我们更好地解决这个问题。但是，Redux 在使用上可能会比较繁琐和复杂。就拿全局状态来说，我们需要定义 action、reducer，然后在组件中使用 connect() 连接 Redux。但是，我们是否有更方便且简单的方式来实现全局状态？那就是使用 npm 包 redux-global-storage。下面，我们就来学习一下如何使用它。
安装
首先，我们需要安装 redux-global-storage。可以使用 npm 或 yarn 来进行安装：
npm install redux-global-storage
或
yarn add redux-global-storage
使用
redux-global-storage 提供了一个名为 GlobalStore 的类。我们可以通过创建一个 GlobalStore 实例来实现全局状态的管理。以下是完整的使用示例。
创建 store
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------
-- -- ----------- ------- ----- - -------
----- ----- - --- -------------
------ --
-- ------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
---
------ ------- ------首先，我们需要创建一个 GlobalStore 实例，并传入初始 state 和 reducer。这里，我们的初始 state 中只包含一个 count 属性，初始值为 0。reducer 中我们实现了两个 action：increment 和 decrement。它们分别会将 count 值加一和减一。接着，我们将这个 store 导出，以便在其他组件中使用。
使用 store 中的 state 和 dispatch
-- -------------------- ---- ------- ------ ----- ---- ---------- -- --- -- -- ----- ----- ----- - ----------------------- -- -- -------- ---------------- ----- ------------ ---
在其他组件中，我们可以通过 store.getState() 方法读取当前的 state。在上面的例子中，我们读取了 count 属性，并将其赋值给变量 count。同时，我们也可以使用 store.dispatch() 方法来调用 reducer 中定义的 action。在例子中，我们使用 type 为 increment 的对象来触发 count 加一。
连接组件
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ----- ---- ----------
-- ---
----- --------------- - ----- -- -
------ -
------ ------------
--
--
----- ------------------ - -------- -- -
------ -
---------- -- -- ----------
----- ------------
---
---------- -- -- ----------
----- ------------
---
--
--
------ ------- ------------------------ ---------------------------------如果你习惯使用 connect() 方法连接组件和 Redux，那么 redux-global-storage 也提供了这个功能。你只需要将 store 转换为一个类似 Redux store 的形式，在 connect() 中使用 mapStateToProps 和 mapDispatchToProps 函数即可。
总结
redux-global-storage 提供了一种非常简单的方式来实现全局状态管理。相比于使用 Redux，redux-global-storage 的配置和使用都更加简单明了。如果你需要处理的状态不是非常复杂，那么使用 redux-global-storage 可能会更加适合你。
完整的示例代码可以在 GitHub 仓库 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681081e8991b448e4312