前言
在前端应用开发中，推送服务是一个必不可少的工具。而推送服务中最常见的问题是如何将推送数据与应用程序的状态同步，以确保应用程序始终显示最新的数据。Redux 是一个流行的 JavaScript 应用程序状态管理库，可以很好地解决这个问题。本文将介绍一个名为 pusher-redux-plus 的 npm 包，它是使用 Redux 与 Pusher 集成的最简单和最有效的方法之一。
关于 Pusher
Pusher 是一个实时的、跨平台的 WebSocket 通信服务。这个服务提供了实时事件和数据的推送，使得前端和后端之间的通信变得更加容易和流畅。Pusher 和已经成为事实上标准的 Socket.io 非常相似，但是 Pusher 提供了更多的可扩展性，更多的功能以及更高的性能。在本文中，我们将介绍如何使用 pusher-redux-plus 套件将 Pusher 集成到 Redux 应用中。
安装与使用
安装
要使用 pusher-redux-plus，需要先安装它。可以通过 npm 包管理器进行安装。使用以下命令：
npm install pusher-redux-plus --save
配置
在使用 pusher-redux-plus 之前，您需要设置一个 Pusher 帐户。请参阅 Pusher 文档以获取更多信息。
接下来，您需要配置 pusher-redux-plus。pusher-redux-plus 提供了一个名为 configurePusherStore 的函数，该函数可以用来配置您的应用程序和 Pusher。可以按照以下方式配置此函数：
-- -------------------- ---- -------
------ ------ ---- ------------
------ - -------------------- - ---- --------------------
----- ------ - -
---- ---------------
-------- -------------------
------------- ----------------------------------
--
----- ------------ - --- ------------------ -
-------- ---------------
------------- ------------------- -- ----------------------------------
----- -
-------- -
---------------- ------- -------------------
--------------- -------------------
--
--
---
------ ------- ----------------------
-------
------- -------------
---在此示例中，我们声明了 Pusher 客户端并将其语义化与推出值传递给 configurePusherStore 函数，然后通过导出配置实例进行引用。此函数需要提供以下参数：
- Pusher：从 pusher-js 导入的客户端类。
- client：使用 Pusher 构造函数创建的实例。
在此处，我们还为 Pusher 客户端提供了一个 authEndpoint 和 JWT Token，以使 Pusher 可以配置身份验证。
创建 Actions
在使用 Redux 与 Pusher 配对时，最重要的方面是创建 actions。Actions 是在应用程序中创建更改的方式。
pusher-redux-plus 为 Redux 应用中使用的每个 Pusher 频道创建了两个 actions。分别为 PRESENCE_CHANNEL_SUCCEEDED 和 PRESENCE_CHANNEL_FAILED。如果 pusher-redux-plus 中有以下推送器侦听者，则会触发这些 actions：
- onMembersChange：当频道中的成员数量发生变化时触发
- onMemberAdded：每当频道中的成员添加时触发
- onMemberRemoved：当频道中的成员被删除时触发
可以通过以下方式创建 action：
-- -------------------- ---- -------
------ -------- --------------------------------------- -
------ -
----- ------------------------------------
--------
--
-
------ -------- ---------------------------------- -
------ -
----- ---------------------------------
------
--
-在每个 actions 中，除了传递 type 属性之外，还需传递必要的参数以完成对应的操作。
创建 Reducers
在创建 actions 后，我们需要创建 reducers。Reducers 帮助管理 state。
在 pusher-redux-plus 中，我们只需要创建一个 reducer。可以按照以下方式创建一个 reducer：
-- -------------------- ---- -------
----- ------------ - -
-------- ---
--
-------- ---------------------------------- - ------------- ------- -
------------------- -
---- ------------------------------------
------ ----------------- ------ -
-------- ----------------- -------------- ----------------
---
---- ---------------------------------
------ ----------------- ------ -
-------- ---
---
--------
------ ------
-
-
------ ------- -----------------------------在此 reducer 中，将应用程序的状态存储为对象。此对象只有一个成员，即 members。 当我们创建 actions 时，pusherPresenceChannelSucceeded actions 会根据各自的成员更新 state。另一方面，当 PRESENCE_CHANNEL_FAILED 触发此函数时，它将清除 state 中的所有成员。
创建 Middleware
现在，我们需要将初始化的 events 注册到 middleware 中。Middleware 可以拦截 actions 并对它们进行处理。可以按照以下方式创建一个 middleware：
-- -------------------- ---- -------
------ - ---------------------- - ---- --------------------
------ - ------------------------------- --------------------------- - ---- ------------
------ ---------------------------- ---- -------------
----- ------------------------------- - -----------------------
----------
-
---------------- ---------- -------- -- -
--------------------------------------------------
--
---------------- ---------- ------- -- -
-------------------------------------------------
--
-------------- ---------- ------- -- -
-------------------------------------------------
--
-------- ---------- ------ -- -
---------------------------------------------
--
--
--
------ - -------------------------------- ---------------------------- --此外，我们需要为 reducers 和 middleware 提供默认导出，以在使用时进行引用。
使用
现在，pusher-redux-plus 已经被设置并配置并且 actions、reducers 和 middleware 中也已定义。那么，如何在我们的应用程序中使用这一切呢？首先，将 redux createStore 添加到应用程序，并将您的 middleware 添加到 createStore 中：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ --------------- ---- -------------- ------ ---------------- ---- --------------- ------ - -------------------------------- ---------------------------- - ---- -------------------------- ----- ----------- - - -------------------------------- ---------------- ----------------- -- ----- ------- - ----------------- ---------------------- ----------------------------- --- ----- ----- - ------------ -------- -------------------------------- --
在此示例中，我们使用 combineReducers 将所有 reducers 捆绑到一个 reducer 层级中，并在后续中将其命名为状态属性名。接下来，我们将 onPressedChannel 并 pusherPresenceChannelReducer 作为 middleware 设置添加到 redux createStore 中。在此随后，我们可以在代码的任何部分读取 state：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------------------ - ---- -------------
----- --- ------- --------- -
-------- -
----- - ------- - - -----------
------ -
-----
--------------- -- ---------------- -- -
-- ---------------------
---
------
-
-
-
----- --------------- - -- --------------------- -- -- -
------ -
-------- ----------------------------- -- ---
--
-
------ ------- ------------------------ - ------------------------------ --------这个示例是使用 Redux 和 React 从应用程序注册的 presence-channel 接收更新推送的最基本的示例。在 mapStateToProps 函数中，我们获取更新的 state。在此更改时，我们可以在 App 中直接使用这些参数。
总结
在本文中，我们介绍了 pusher-redux-plus，该套件可以使 Redux 应用程序中的 Pusher 配对变得轻松和更有效。通过按照本教程所述的步骤，您可以在几分钟内将 Pusher 集成到您的应用程序中。pusher-redux-plus 套件提供了非常实用的工具，让我们在应用程序开发时更加高效，简单，并提高了生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76d7