在现代 Web 应用中，Websockets 已经成为了一种非常重要的通信协议，它可以让 Web 应用实现实时通信、实时更新等功能。而在 Redux 中集成 Websockets，可以让我们更加方便地管理应用的状态，并且可以让我们在 Websockets 连接状态发生变化时，自动更新应用的状态。
本文将介绍如何在 Redux 中集成 Websockets，并提供示例代码。
Redux 中的 Websockets
在 Redux 中集成 Websockets，需要使用一个叫做 redux-websocket 的中间件。这个中间件可以让我们在 Redux 中使用 Websockets，而且还可以让我们在 Websockets 连接状态发生变化时，自动更新应用的状态。
首先，我们需要安装 redux-websocket：
npm install --save redux-websocket
然后，在 Redux 中使用 redux-websocket，需要在 applyMiddleware 中添加这个中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------------------- ---- ------------------ ----- ------------------- - ------------------------------------------------- ----- ----- - ------------ -------- ------------------------------------ --
在上面的代码中，我们创建了一个 websocketMiddleware，并且指定了 Websockets 的地址。然后，在 applyMiddleware 中添加这个中间件，就可以在 Redux 中使用 Websockets 了。
Websockets 连接状态的更新
在 Websockets 中，连接状态有四种：CONNECTING、OPEN、CLOSING、CLOSED。我们可以通过 redux-websocket 提供的 WEBSOCKET_OPENED、WEBSOCKET_CLOSED、WEBSOCKET_ERROR、WEBSOCKET_MESSAGE 等 action 类型，来更新应用的状态。
例如，我们可以在 Redux 中添加一个 websocket 的 reducer，来处理 Websockets 连接状态的更新：
-- -------------------- ---- -------
----- ------------ - -
------- ---------------
-------- -----
--
-------- ---------------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
------- ------------
--
---- -------------------
------ -
---------
------- ---------------
--
---- ------------------
------ -
---------
-------- -----------------------
--
---- --------------------
------ -
---------
-------- -----------------------
--
--------
------ ------
-
-在上面的代码中，我们定义了一个 websocketReducer，用来处理 Websockets 连接状态的更新。当 Websockets 连接状态发生变化时，这个 reducer 会被调用，然后更新应用的状态。
示例代码
下面是一个完整的示例代码，演示如何在 Redux 中集成 Websockets：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------------- ---- ------------------
----- ------------------- - -------------------------------------------------
----- ------------ - -
------- ---------------
-------- -----
--
-------- ---------------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
------- ------------
--
---- -------------------
------ -
---------
------- ---------------
--
---- ------------------
------ -
---------
-------- -----------------------
--
---- --------------------
------ -
---------
-------- -----------------------
--
--------
------ ------
-
-
----- ----- - ------------
-----------------
------------------------------------
--
------------------ -- -
------------------------------
---
----------------
----- -----------------
-------- -
-------- ------- -------------
--
---在上面的代码中，我们创建了一个 websocketMiddleware，并且指定了 Websockets 的地址。然后，我们定义了一个 websocketReducer，用来处理 Websockets 连接状态的更新。最后，我们创建了一个 store，并且向这个 store 中发送了一个 Websockets 消息。
当我们运行上面的代码时，可以在控制台中看到应用的状态发生了变化，而且 Websockets 消息也被成功地发送了。这就是在 Redux 中集成 Websockets 的基本用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94a4da941bf71340dfd57
