redux-websocket-bridge 是一个用于 React 和 Redux 应用的 npm 包，它能够帮助我们在 WebSocket 和 Redux Store 之间建立桥梁，使得前端应用可以和后端进行实时的双向通信，实现发送和接收数据。
在本篇文章中，我们将详细介绍如何使用 redux-websocket-bridge，为读者提供深度的学习和指导意义。
安装
首先，我们需要通过 npm 安装 redux-websocket-bridge 包，命令如下：
npm install --save redux-websocket-bridge
之后我们需要在项目的代码中导入该包：
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
import createWebSocketMiddleware from 'redux-websocket-bridge';创建 Web Socket Middleware
下一步是创建一个 websocket middleware，用于在 redux store 和 websocket 之间进行数据交换。我们可以使用 createWebSocketMiddleware 函数来创建 middleware。
const wsBridgeMiddleware = createWebSocketMiddleware({
prefix: 'ws/',
uri: 'ws://localhost:8080/ws',
});参数 prefix 是一个前缀，用于定义发送或接收到的 action type。uri 是我们 WebSocket Server 的 url 地址。在上面的例子中，我们使用的是本地主机的 8080 端口作为 WebSocket Server。
将 Middleware 应用到 Redux Store
为了将中间件应用于 Redux store，我们需要使用 applyMiddleware 来将其应用至 store。同时我们需要应用其他的中间件以进行数据处理。以下的代码将应用上文中的 WebSocket Middleware 在 redux store 中。
const middlewareEnhancer = applyMiddleware(wsBridgeMiddleware, anotherMiddleware) const composedEnhancers = compose( middlewareEnhancer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); const store = createStore(rootReducer, composedEnhancers);
在这个例子中，我们应用了 Redux DevTools，以便我们在调试过程中查看 redux store 的状态。
发送 WebSocket 消息
因为我们创建了一个 websocket middleware，我们可以通过 dispatch 发送 websocket 消息。
const sendStatus = () => ({
type: 'ws/UPDATE_STATUS',
payload: { status: "connecting" }
});
store.dispatch(sendStatus());这个例子中，我们将 action type 设置为 “ws/UPDATE_STATUS”，这个类型将被发送到我们的 WebSocket Server。我们可以在服务器端监听到这个类型，做出相应的处理。
我们在 server 中需要注意绑定接收到的类型，以下是 server 的代码示例：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------- -------- ----------------- -
----- ---- - --------------------
------ ----------- -
---- -------------------
--------------------- --------- ---------------------
------
-
---
---接收 WebSocket 消息
除了发送 WebSocket 消息，我们同样可以通过 redux-websocket-bridge 接收WebSocket 服务器的消息。我们可以依靠中间件的帮助，监听 web socket 的事件。当 websocket 接收到消息的时候，它会改变 redux store 的状态，并且会通过 store 发送一个 action。
以下是我们监听 websocket 中间件的代码：
store.dispatch({
type: 'websocket/open',
meta: { uri: 'ws://localhost:8080/ws' }
});在这个例子中，我们将 action type 设置为 websocket/open。这个 action 将触发 middleware 状态的改变，我们就可以通过 监听 “ws/” 前缀的 action 来处理这些状态的改变。 我们可以通过设置相应的 reducer 来处理 action。以下是一个简单的 reducer 示例：
-- -------------------- ---- -------
----- ------------ - -
------- ---------------
--
-------- ---------------------- - ------------- ------- -
------------------- -
---- -----------------
------ - --------- ------- ----------- --
---- ------------------
------ - --------- ------- -------------- --
--------
------ ------
-
-在这个 reducer 中，我们将处理发出的 action，将 store 的 websocket 状态从 disconnected 更改为 connected。
总结
redux-websocket-bridge 的出现，为我们提供了一种简单的方式将 WebSocket 和 Redux store 相结合，实现了双向通信。我们可以依靠中间件的帮助快速和轻松的实现 WebSocket 与 Redux 应用的无缝连接。如果你正在构建一个使用 WebSocket 的的 React 和 Redux 应用，那么 redux-websocket-bridge 可能是一个更好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753681e8991b448ea470