redux-websocket-bridge 是一个用于 React 和 Redux 应用的 npm 包，它能够帮助我们在 WebSocket 和 Redux Store 之间建立桥梁，使得前端应用可以和后端进行实时的双向通信，实现发送和接收数据。
在本篇文章中，我们将详细介绍如何使用 redux-websocket-bridge，为读者提供深度的学习和指导意义。
安装
首先，我们需要通过 npm 安装 redux-websocket-bridge 包，命令如下：
--- ------- ------ ----------------------
之后我们需要在项目的代码中导入该包：
------ - ------------ ---------------- ------- - ---- -------- ------ ----------- ---- ------------- ------ ------------------------- ---- -------------------------
创建 Web Socket Middleware
下一步是创建一个 websocket middleware，用于在 redux store 和 websocket 之间进行数据交换。我们可以使用 createWebSocketMiddleware 函数来创建 middleware。
----- ------------------ - --------------------------- ------- ------ ---- ------------------------- ---
参数 prefix 是一个前缀，用于定义发送或接收到的 action type。uri 是我们 WebSocket Server 的 url 地址。在上面的例子中，我们使用的是本地主机的 8080 端口作为 WebSocket Server。
将 Middleware 应用到 Redux Store
为了将中间件应用于 Redux store，我们需要使用 applyMiddleware 来将其应用至 store。同时我们需要应用其他的中间件以进行数据处理。以下的代码将应用上文中的 WebSocket Middleware 在 redux store 中。
----- ------------------ - ----------------------------------- ------------------ ----- ----------------- - -------- ------------------- ----------------------------------- -- ------------------------------------- -- ----- ----- - ------------------------ -------------------
在这个例子中，我们应用了 Redux DevTools，以便我们在调试过程中查看 redux store 的状态。
发送 WebSocket 消息
因为我们创建了一个 websocket middleware，我们可以通过 dispatch 发送 websocket 消息。
----- ---------- - -- -- -- ----- ------------------- -------- - ------- ------------ - --- -----------------------------
这个例子中，我们将 action type 设置为 “ws/UPDATE_STATUS”，这个类型将被发送到我们的 WebSocket Server。我们可以在服务器端监听到这个类型，做出相应的处理。
我们在 server 中需要注意绑定接收到的类型，以下是 server 的代码示例：
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------- -------- ----------------- -
----- ---- - --------------------
------ ----------- -
---- -------------------
--------------------- --------- ---------------------
------
-
---
---接收 WebSocket 消息
除了发送 WebSocket 消息，我们同样可以通过 redux-websocket-bridge 接收WebSocket 服务器的消息。我们可以依靠中间件的帮助，监听 web socket 的事件。当 websocket 接收到消息的时候，它会改变 redux store 的状态，并且会通过 store 发送一个 action。
以下是我们监听 websocket 中间件的代码：
---------------- ----- ----------------- ----- - ---- ------------------------ - ---
在这个例子中，我们将 action type 设置为 websocket/open。这个 action 将触发 middleware 状态的改变，我们就可以通过 监听 “ws/” 前缀的 action 来处理这些状态的改变。 我们可以通过设置相应的 reducer 来处理 action。以下是一个简单的 reducer 示例：
----- ------------ - -
------- ---------------
--
-------- ---------------------- - ------------- ------- -
------------------- -
---- -----------------
------ - --------- ------- ----------- --
---- ------------------
------ - --------- ------- -------------- --
--------
------ ------
-
-在这个 reducer 中，我们将处理发出的 action，将 store 的 websocket 状态从 disconnected 更改为 connected。
总结
redux-websocket-bridge 的出现，为我们提供了一种简单的方式将 WebSocket 和 Redux store 相结合，实现了双向通信。我们可以依靠中间件的帮助快速和轻松的实现 WebSocket 与 Redux 应用的无缝连接。如果你正在构建一个使用 WebSocket 的的 React 和 Redux 应用，那么 redux-websocket-bridge 可能是一个更好的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005753681e8991b448ea470