Redux 阻止大量 WebSocket 事件

Question

我当前构建的应用程序需要通过 websocket 获取所有数据，问题是没有通过 websocket 获取所有数据的功能，并且我必须从 websocket 获取单个项目。这可能意味着在页面加载时最多有 100 多个事件发送到 websocket。

import { webSocketData } from "../actions";

const setupSocket = dispatch => {
  const socket = new WebSocket("ws://localhost:8889");

  return new Promise((resolve, reject) => {
    socket.onopen = () => {
      return resolve(socket);
    };

    socket.onmessage = event => {
      const data = JSON.parse(event.data);
      dispatch(webSocketData(data));
      console.log(data.type);
    };
  });
};

export default setupSocket;

对于上面的代码，这意味着调度了 100 个 redux 操作，这导致我的性能非常缓慢。

我确信 React 仅在新数据可用时才会重新渲染，问题是根据发出的 100 个事件，新数据可用 100 次。

我正在使用 redux-saga 来管理这个应用程序中的副作用。页面加载后，我FETCH_EVENT_DATA可能会为页面上的每个事件调度 100 次操作 (100)。不可能延迟加载或分页，因为它们都需要立即可见。

const fetchEventData = function* fetchEventData(params) {
  yield takeEvery("FETCH_EVENT_DATA", action => {
    params.socket.send(
      JSON.stringify({ type: "getEvent", id: parseInt(action.data) })
    );
  });
};

这会导致webSocketData(data)分派 100 次，并且随着每个webSocketData(data)操作的分派，页面中会逐渐弹出 100 个事件。

理想情况下，我希望有一个可以发送调用的 websocket 事件getAllEvents，但事实并非如此。任何人都可以建议一个解决方案，以便在我发送操作之前等待所有请求返回，或者甚至是我没有想到的另一个解决方案？