redux-middleware-ws 是一个基于 WebSocket 协议的中间件，用于在 Redux 应用程序中使用 WebSocket 进行双向通信。在本文中，我们将介绍如何使用这个包来处理实时数据流，以及如何将它集成到您的 React 应用程序中。
安装
首先，我们需要安装 redux-middleware-ws：
npm install redux-middleware-ws
运行上述命令后，您将能够使用这个包。
在 Redux 中使用
为了使用 redux-middleware-ws，您需要将其添加到 Redux 应用程序中的 Middleware：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ---------- -- ------------------- - ---- ---------------------- -- -- --------- ---
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
------------------------------------------
-
--上面的示例中，我们创建了一个 WebSocket 连接到 ws://localhost:5000，并添加了 WebSocketMiddleware 中间件到 Redux 应用程序中。现在我们已经准备好发送和接收实时数据了。
在应用程序中发送数据的方式与通常的 Redux 操作类似，只需在 dispatch 中指定操作类型：
const sendNewMessage = (message) => ({
type: 'SEND_NEW_MESSAGE',
payload: message
});
store.dispatch(sendNewMessage('Hello world!'));接收数据的方式也类似，只需在 Redux 应用程序中设置 WebSocket 监听器：
-- -------------------- ---- -------
----- ---------- - ------- -- ------- -- -
----- - ----- ------- - - -----------------------
------ ------ -
---- --------------
---------------- ----- -------------- ------- ---
------
-- ---------
-
--
----- ----- - ------------
------------
----------------
------------------------------------------ ------------------
-
--上述示例中，我们通过 wsListener 函数设置了 WebSocket 监听器，并将其传递给了 WebSocketMiddleware 中间件。当接收到数据时，wsListener 将解析 data 属性，并根据类型触发相应的 Redux 操作。
在 React 中使用
现在，我们来看看如何在 React 应用程序中使用 redux-middleware-ws 进行 WebSocket 通信。
首先，在 src/index.js 中，我们需要为应用程序配置 Redux Provider，这样所有组件都可以访问 Redux 全局状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ - ---------- -- ------------------- - ---- ----------------------
------ ----------- ---- -------------
------ --- ---- --------
----- ----- - ------------
------------
----------------
------------------------------------------
-
--
----------------
--------- --------------
---- --
------------
-------------------------------
--接下来，在组件中使用 WebSocket，默认情况下，组件只能读取 Redux 状态，如果需要发送和接收 WebSocket 数据，则需要使用 mapStateToProps 和 mapDispatchToProps 函数将 WebSocket 操作映射到组件的属性。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ------------ ------------------- - ---- ----------------------------
----- ------- - ------- -- -
------------ -- -
---------------------------------------------
-- ---------------------
----- ----------- - -- -- -
----------------------------------------
--
------ -
-----
------ ----------- ---------------------------- ------------- -- ---------------------------------------- --
------- ---------------------------------
------
--
--
----- --------------- - ------- -- -
------ -
------------ -----------------------
--------------- -------------------------
--
--
----- ------------------ - ---------- -- -
------ --------------------
--------------------
-----------
-- ----------
--
------ ------- ------------------------ -----------------------------在上述示例中，我们将 setConnectionStatus 和 sendMessage 函数封装到了 mapDispatchToProps 中，并将它们映射到了组件的属性中。这样，在组件中就可以通过 props.setConnectionStatus(props.isConnected) 和 props.sendMessage(props.currentMessage) 来触发 WebSocket 操作了。
结论
redux-middleware-ws 是一个强大的库，可以轻松地在 React 应用程序中使用 WebSocket 进行双向通信。在本文中，我们介绍了如何使用该库，并提供了示例代码。希望这篇文章能帮助您快速上手 redux-middleware-ws。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f77238a385564ab68ff