npm 包 redux-socket 使用教程
redux-socket 是一个 npm 包，它提供了一个基于 WebSocket 的 Redux 中间件，可以让你将 WebSocket 与 Redux 状态管理结合在一起。它可以简化 Redux 应用程序中的 WebSocket 集成，并提供了一些独特的特性。
安装
使用 npm 进行安装：
npm install redux-socket --save
配置
在你的 Redux 应用程序中，你需要创建 WebSocket 连接并传递它作为配置项给 redux-socket 中间件。你还需要将 redux-socket 中间件添加到 Redux 存储器中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------------- - ---- --------------- ------ ----------- ---- ------------- ----- ---------------- - ---------------------------------------------- ----- ----- - ------------ ------------ --------------------------------- --
在上面的示例中，我们创建了一个名为 socketMiddleware 的中间件实例，并将其应用于 Redux 存储器中。中间件通过 createSocketMiddleware 函数进行创建，该函数需要传递一个 WebSocket 地址（在这个示例中是本地主机的端口 3000）。你还需要传递与 React 一样的 Redux Reducer 根，并将中间件添加到应用程序的 applyMiddleware 中。
使用
一旦你完成了配置，就可以开始向服务器发送和接收 WebSockets 消息了。要发送消息，你需要将它们包含在一个具有 type 属性的操作对象中，并将该对象传递给 socket Redux 中间件的 emit 方法。
const messageToSend = {
type: 'SEND_MESSAGE',
payload: {
message: 'Hello world!'
}
};
store.dispatch(emit('socket', messageToSend));在上面的示例中，我们创建了一个名为 messageToSend 的对象，并包含了 SEND_MESSAGE 类型的操作，并将 message 作为有效负载。我们通过 store.dispatch 方法将操作对象分派给 Redux 存储器的 emit 方法。
要侦听来自服务器的消息，你需要将一个带有 on 属性的操作对象传递给 socket Redux 中间件的 listen 方法。
-- -------------------- ---- -------
----- --------------- - -
----- ------------------
--- ----------
-------- ------- ------- -- -
------ -
---------
--------- ------------------- -----------------------
--
-
--
------------------------------- ------------------在上面的示例中，我们创建了一个名为 messageListener 的对象，并包含了 RECEIVE_MESSAGE 类型的操作，并将事件名称 message 作为其 on 属性的值。我们还定义了一个 Redux Reducer，它将在检测到消息时运行，并在状态中添加新消息。我们通过 store.dispatch 方法将操作对象分派给 listener 方法。
结论
现在你已经了解了如何使用 redux-socket 包来集成 WebSocket 功能到 Redux 应用程序中。此技术使得向服务器发送和接收 WebSockets 响应变得非常简单，并且使得 Redux 的状态管理机制更加紧密集成。尝试将此技术应用于自己的 React 和 Redux 项目中，并体验其强大的功能！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b97