如何在 Redux 中集成 Websockets

在现代 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 中添加这个中间件：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import createWebsocketMiddleware from 'redux-websocket';

const websocketMiddleware = createWebsocketMiddleware('ws://localhost:8080');

const store = createStore(
  reducer,
  applyMiddleware(websocketMiddleware)
);

在上面的代码中，我们创建了一个 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 连接状态的更新：

// www.javascriptcn.com code example
const initialState = {
  status: 'disconnected',
  message: null,
};

function websocketReducer(state = initialState, action) {
  switch (action.type) {
    case 'WEBSOCKET_OPENED':
      return {
        ...state,
        status: 'connected',
      };
    case 'WEBSOCKET_CLOSED':
      return {
        ...state,
        status: 'disconnected',
      };
    case 'WEBSOCKET_ERROR':
      return {
        ...state,
        message: action.payload.message,
      };
    case 'WEBSOCKET_MESSAGE':
      return {
        ...state,
        message: action.payload.message,
      };
    default:
      return state;
  }
}

在上面的代码中，我们定义了一个 websocketReducer，用来处理 Websockets 连接状态的更新。当 Websockets 连接状态发生变化时，这个 reducer 会被调用，然后更新应用的状态。

示例代码

下面是一个完整的示例代码，演示如何在 Redux 中集成 Websockets：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import createWebsocketMiddleware from 'redux-websocket';

const websocketMiddleware = createWebsocketMiddleware('ws://localhost:8080');

const initialState = {
  status: 'disconnected',
  message: null,
};

function websocketReducer(state = initialState, action) {
  switch (action.type) {
    case 'WEBSOCKET_OPENED':
      return {
        ...state,
        status: 'connected',
      };
    case 'WEBSOCKET_CLOSED':
      return {
        ...state,
        status: 'disconnected',
      };
    case 'WEBSOCKET_ERROR':
      return {
        ...state,
        message: action.payload.message,
      };
    case 'WEBSOCKET_MESSAGE':
      return {
        ...state,
        message: action.payload.message,
      };
    default:
      return state;
  }
}

const store = createStore(
  websocketReducer,
  applyMiddleware(websocketMiddleware)
);

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch({
  type: 'WEBSOCKET_SEND',
  payload: {
    message: 'Hello, Websockets!',
  },
});

在上面的代码中，我们创建了一个 websocketMiddleware，并且指定了 Websockets 的地址。然后，我们定义了一个 websocketReducer，用来处理 Websockets 连接状态的更新。最后，我们创建了一个 store，并且向这个 store 中发送了一个 Websockets 消息。

当我们运行上面的代码时，可以在控制台中看到应用的状态发生了变化，而且 Websockets 消息也被成功地发送了。这就是在 Redux 中集成 Websockets 的基本用法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94a4da941bf71340dfd57