前言
WebSocket 技术是一种开放标准，它在浏览器和服务器之间建立一个双向的通信通道，使得实时的数据传输变得十分容易。而 Redux 是一种数据流管理库，它给予前端应用一个严格的数据管理规范和控制权。如果能将 WebSocket 和 Redux 结合起来，调试代码和开发过程都会变得更加方便和可控。在本文中，我们将介绍如何使用 Redux 编写处理 WebSocket 事件的最佳实践。
WebSocket 事件化
若要将 WebSocket 事件化，首先需要将 WebSocket 绑定到 Redux store 上，并且建立一个 Redux action，将 WebSocket 报文转换为对象类型的数据。下面是一个简单的示例：
-- -------------------- ---- ------- ------ ----- ---- ----------- --- ------ - -------------------------- -------------------- -- -- - --------------------- ---------------------- --------- ------------ --- ----------------------- -- -- - --------------------- --------------------------- --- -------------------- ------ -- - --------------------- -------------------- ----- ------- ---
上面的示例中，我们在 WebSocket 的 connect、disconnect 和 message 事件中发送了三种不同的 action。这些 action 会被 Redux store 中的 reducer 处理，从而将 WebSocket 事件化得更加方便。我们看一下这个 reducer 的简单实现：
-- -------------------- ---- -------
----- ------------ - -
------------ ------
--------- -----
--------- --
--
-------- ---------------------- - ------------- ------- -
------------------- -
---- ----------------------
------ ----------------- ------ -
------------ -----
--------- ---------------
---
---- -------------------------
------ ----------------- ------ -
------------ ------
--------- ----
---
---- --------------------
------ ----------------- ------ -
--------- ----------------------------------
---
--------
------ ------
-
-
------ ------- -----------------我们使用了一个 initialState，以及 switch/case 语句处理了三种事件类型的数据更新。保证了 State 的一致性，并且更加便于你将 Redux 中的数据与 WebSocket 的数据进行对比和调试。
异步 Action
由于 WebSocket 是一种异步的通信方式，所以在我们使用 WebSocket 时，必须使用 Redux 的异步 action。在使用异步 action 时，我们通常会采用 Redux Toolkit 中提供的 createAsyncThunk 方法。下面是一个综合使用了 WebSocket 和异步 action 的示例：
-- -------------------- ---- -------
------ - ---------------- - ---- -------------------
------ ----- ---- -----------
--- ------ - --------------------------
----- ----------------- - -- -- -
------ --- ----------------- ------- -- -
-------------------- -- -- -
---------------- ----- ---------------------- -------- --------- ---
----------
---
----------------------- -- -- -
---------------- ----- ------------------------ ---
---------
---
-------------------- ------ -- -
---------------- ----- -------------------- -------- ---- ---
---
---
--
------ ----- -------------- - -----------------
-----------------
----- -- -- -
--- -
----- --------------------
------ ---
- ----- ----- -
------ ---
-
-
--结论
使用 Redux 处理 WebSocket 事件的过程中，我们需要将 WebSocket 事件化，并通过 reducer 将其存储一个状态中。使用异步 action 并结合 createAsyncThunk 方法，可以更好地管理异步的 WebSocket 事件。这样做不仅有助于调试代码，而且更符合 Flux 的设计思想，同时还使得处理 WebSocket 事件的代码可读性更高。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67305763eedcc8a97c91aaad