介绍
redux-websocket-autoreconnect 是一款可以让 React 和 Redux 应用连接 WebSockets 的 npm 包。它提供了自动重连 WebSocket 的功能，以保证应用程序与服务器的连接不会断开。
本教程将介绍如何在您的 React 和 Redux 应用程序中使用 redux-websocket-autoreconnect。我们将探讨如何安装和配置这个包，以及如何使用它来实现 WebSocket 连接和数据交换。
安装
使用下面的命令来安装 redux-websocket-autoreconnect：
npm install redux-websocket-autoreconnect --save
配置
首先，在你的 Redux store 中引入 Middleware，并将它添加到你的 store 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------------------- ---- -------------------------------- ----- ------------------------- - - ---- ---------------------- ------------------ ----- -- ----- ------------------- - ----------------------------------------------------- ----- ----- - ------------ --------- ------------------------------------ --
以上代码中，我们引入了 createStore 和 applyMiddleware 函数，以创建 redux store，并使用 createWebSocketMiddleware 函数创建了 Redux Middleware。
需要注意的是，我们还需要提供 WebSocket 的 URL 和自动重连的时间间隔。在这个例子中，WebSocket 连接到本地的 8080 端口，并在每 3 秒自动重连。
使用
现在我们已经配置好了 redux-websocket-autoreconnect，让我们看看如何使用它在我们的应用程序中发起 WebSocket 请求。
连接到 WebSocket
要连接到 WebSocket，我们需要在 Redux store 中 dispatch CONNECT_WEBSOCKET action。该 action 会触发 WebSocket 连接，并返回一个 WebSocket 对象。
import { connectWebSocket } from 'redux-websocket-autoreconnect';
store.dispatch(connectWebSocket());发送和接收消息
一旦连接到 WebSocket，我们就可以使用 socket 对象发送和接收消息。要发送消息，我们需要 dispatch SEND_WEBSOCKET_MESSAGE action：
import { sendWebSocketMessage } from 'redux-websocket-autoreconnect';
store.dispatch(sendWebSocketMessage({ type: 'ADD_USER', payload: { name: 'John' } }));要接收消息，我们需要添加一个 reducer 来处理接收到的消息：
-- -------------------- ---- -------
------ - ------------------------- - ---- --------------------------------
-------- ---------------------- - --- ------- -
------ ------------- -
---- --------------------------
----- - ------- - - -------
------ -
---------
--------- ------------------- ---------
--
--------
------ ------
-
-上面的 reducer 中，我们在接收到 RECEIVE_WEBSOCKET_MESSAGE action 时，将一条消息添加到 Redux store 中的 messages 数组中。
关闭 WebSocket
要关闭 WebSocket 连接，我们需要在 Redux store 中 dispatch CLOSE_WEBSOCKET action：
import { closeWebSocket } from 'redux-websocket-autoreconnect';
store.dispatch(closeWebSocket());以上就是 redux-websocket-autoreconnect 包的使用教程。如果您想了解更多关于 WebSocket 的知识和如何在 React 和 Redux 应用程序中使用它，可以参考官方文档：https://websocket.org/。
示例代码
以下是一个可以让用户发送和接收消息的简单聊天室示例。该示例使用了 redux-websocket-autoreconnect。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ----------------- --------------------- -------------- - ---- --------------------------------
-------- --------------- -
----- --------- ----------- - -------------
-------- -------------------- -
-------------------
-- ---------------- -
---------------------------- ----- --------------- -------- - ----- ------- - ---
---------------
-
-
-------- -------------------------- -
-----------------
-
------ -
-----
----------- -- --- ---- ---------
----- -----------------------------
------ ----------- --------------- ------------- -- --------------------------- --
------- ---------------------------
-------
------
--
-
----- --------------- - ------- -- -
------ -
------- -----------------------
--
--
----- ------------------ - -
-----------------
---------------------
---------------
--
------ ------- ------------------------ ------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055afb81e8991b448d8a48