在前端开发中，实时通信是一种极其重要的功能。例如，一个在线聊天应用需要即时地向用户发送新消息，而不需要他们手动刷新页面。Redux 是一个流行的状态管理库，但它在处理实时通信方面有一些挑战。在本文中，我们将探讨如何使用 Redux 处理实时通信并研究一些最佳实践和示例代码。
Redux 的挑战
Redux 通过一个单一的状态存储所有的应用状态。使用 Redux，开发者将应用程序状态表示为一个 JavaScript 对象，称为 Store。该 Store 被操作的方式有严格的规则，最好通过执行纯函数的 state 转换来管理。
这样的一个 Store 不能直接存储的实时数据，因为它只能由 action 触发并通过 reducer 转换。因此，Redux 的挑战是实时数据具有的变化不能直接更新到 Store 中。下一步考虑解决方案。
解决方案
使用 Redux 中间件
Redux 中间件是一种框架，可以捕获和处理 action，它可以被用来处理异步请求，也可以被用来处理实时更新。
例如，Redux 中的 redux-thunk 中间件可以帮助我们处理异步请求。它的主要思想是，为异步操作添加一个额外的 action。当异步操作完成后，action 返回会首先发出一个 REQUEST action，然后是一个 SUCCESS 或 FAILURE action。
现在，如果要处理实时更新，我们需要准备一个适当的中间件，该中间件可以捕获特定的 action（例如 ADD_ITEM）并将其广播到其他模块。该模块将实时数据添加到 Store 中。例如，我们可以使用 socket.io-client 库与服务器建立一个 Websocket 连接，并将实时数据发送给客户端。
使用 WebSocket
WebSocket 是一种可以保持长连接并实现双向数据交换的通信协议。它可以帮助解决跨域请求的问题，同时还能够实现实时更新。因此，可以使用 WebSocket 与服务器建立长连接，并根据需要更新应用程序的状态。
例如，我们可以使用 redux-action-socket 库来使用 WebSocket 更新 Redux 的状态。这个库会将实时数据推送到 Store 中。
Redux-Saga
Redux-Saga 是一个用于管理 Redux 应用的副作用的库。使用 Saga，我们可以使应用程序的状态与异步操作的处理紧密相连。
在 Redux 中处理实时数据的常见用例是从 WebSockets 中提取实时更新。我们可以使用 Redux-Saga 来实现该效果。当接收到一个表示更新的 action 后，Redux-Saga 可以派生一个新的任务来更新应用程序的状态，同时仍然保持 Redux Store 中的单状态原则。
最佳实践
- 仅更新受影响的状态：只更新实时数据影响的存储状态。这也可被称为持续更新状态。
- 理解 Store 中的数据：在 Store 中只保存需要被 Redux 管理的数据。对于实时数据，应该将其存储在其他地方，例如某个元素的状态。我们可以使用 Redux 的 Store 更新所有状态，但是需要记住只有一些状态是需要被更新的。
示例代码
我们首先安装 socket.io-client 和 redux-thunk 库：
npm install socket.io-client redux-thunk --save
然后，我们可以创建 Redux 的 action，这个 action 在接收到一个或多个数据点后添加数据：
const addItem = (name, value) => ({ type: 'ADD_ITEM', payload: { name: name, value: value } });
我们现在可以定义一组中间件，这些中间件负责处理由 Websocket 接收到的实时更新：
-- -------------------- ---- ------- ----- ---------------- - -- -- - --- ------ - ----- ----- ------------------ - ------- -- ------- -- - ---------------- ----- ------------------ -- - ------ ------- -- ------ -- -------- -- - -- ------------ --- ----------------- - ------ - ---------------------------------------- ------------------ ------ -- - --------------------------------- ------------- --- -------------------- --------------------------- - ------ ------------- - - ----- ----------- - - ----------------- --------------- -- ----- ----- - -------------------- ---------------------------------展开代码
在 socketMiddleware 中，我们创建了一个 WebSocket 并将所有实时数据都广播到 Store 中。
我们可以在组件中使用定义的 addItem action 来添加新的数据，然后将其呈现为一个列表：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - ------- - ---- ------------ ----- -------------------- ------- --------- - ------------------- - --------------------- ----- ----------------- -------- - --------- ----------------------- - --- - -------- - ------ - ---- -------------------------- -- - --- ---------------------------- ----------------- --- ----- -- - - ----- --------------- - ------- -- -- ------ ----------- --- ------ ------- -----------------------------------------------展开代码
使用这个示例代码，我们展示了如何使用 Redux 广播和更新实时数据。Redux 中间件和 WebSocket 信道的使用可以确保我们仅更新受影响的状态并遵循 Redux 设计原则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd49faa231b2b7edf8628e
