介绍
在前端开发中，我们常常需要实时更新应用程序的状态。为此，我们可以使用 pusher 来实现实时通信。redux-pusher 是一个 npm 包，可以帮助我们将 pusher 整合到 redux 中来管理应用状态。
安装
首先，在项目中安装 pusher 和 redux-pusher：
npm install pusher redux-pusher
然后，你需要在 pusher 官网注册一个账户，并创建一个 app。在 app 管理页面，你可以找到 app ID、key 和 secret，这些信息将在之后使用。
配置
创建一个 src/store.js 文件来管理 redux store。将 redux-pusher 的 middleware 添加到 store 中：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------ ---- ------------
------ - ---------------------- - ---- ---------------
------ ----------- ---- -------------
----- ------ - --- -------------------- -
-------- -----------------
---------- -----
---
----- ---------------- - ------------------------
------------- -------
-- --------- --- --- ------ ------ ----- --- --------- ------
-- ---------- --------------
---
----- ----- - ------------
------------
----------------
----------------
-
--
------ ------- ------在上面的代码中，我们创建了 pusher 客户端并将其传递给 createPusherMiddleware。你需要将 <your_key> 替换为你的 app key，并将 <your_cluster> 替换为你的 pusher 集群。
使用
现在，我们已经配置好 redux-pusher，可以开始发送和接收 pusher 事件了。让我们假设我们正在开发一个实时聊天应用程序。当用户输入一条新消息并按下“发送”按钮时，我们将触发一个 pusher 事件：
-- -------------------- ---- ------- ------ ------ ---- ------------ ----- ------ - --- -------------------- - -------- ----------------- ---------- ----- --- -- --- ----- ----------- - --------- -- - ---------------------- -------------- - ------- --- -
这将触发一个名为 new-message 的事件，发送给 chat 频道。我们的 redux store 需要响应这个事件并更新应用状态。
在我们的 reducer 中，我们可以监听 PUSHER_EVENT action type，并对接收到的事件进行处理：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------
----- ------------ - -
--------- ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------
-- ----------------- --- -------------- -
----- - ------- - - ------------
------ -
---------
--------- ------------------- --------
-
-
------ ------
--------
------ ------
-
--当 new-message 事件被触发时，我们将接收到一个 PUSHER_EVENT action，其中的 eventName 存储了触发事件的名称。我们可以根据事件名称来决定如何更新应用状态。
结论
在这篇文章中，我们介绍了如何使用 redux-pusher npm 包来实现实时状态更新。我们学习了如何集成 pusher 到 redux 中，并且介绍了如何发送和接收 pusher 事件。希望这篇文章对于前端开发人员有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c6e81e8991b448d9eaa