Redux Socket.io 中间件多次调度一个动作答案

【问题标题】：Redux Socket.io Middleware Dispatches one action more than onceRedux Socket.io 中间件多次调度一个动作
【发布时间】：2018-04-20 12:09:55
【问题描述】：

我有一个下面格式的自定义 redux 操作，它应该侦听由 socket.io 服务器发出的一组事件，并根据触发的事件使用有效负载分派操作。问题是当一个事件从服务器发出一次时，中间件似乎被触发超过 4 或 5 次，在某些情况下导致应用程序崩溃。可能是什么问题。中间件代码如下：

import io from "socket.io-client";
import { WORKOUT_EVENTS } from "./constants";

export default socketIOReduxMiddleware = store => next => action => {
    const socket  = io("http://192.168.1.16:3001", { reconnect: true, pingTimeout: 10000, pingInterval: 3000, transports: ["websocket", "polling"] });

    WORKOUT_EVENTS.forEach(event => {
        socket.on(event, payload => {
            store.dispatch({ type: event, payload });
        }); 
    });
    next(action);
};

常量文件有如下代码：

export const WORKOUT_EVENTS = [
"start workout",
"wait trigger",
"phase countdown",
"phase break",
"exercise countdown",
"exercise",
"exercise explanation",
"round countdown",
"main phase exercises",
"station change",
"end workouts"
];

这是完整的中间件代码。

【问题讨论】：

这里不是加了多个监听器吗？
不，我使用相同的连接设置来测试使用 http://amritb.github.io/socketio-client-tool 并且当套接字服务器调度操作时，它只记录一次，而不是在 react-native 应用程序中记录多次
我不明白你在说什么，但你在一个循环中有socket.on，所以它被注册了不止一次。
好的。你会如何重写这个？
我需要查看更多代码。我会尝试首先删除 forEach() 代码并将其放在其他地方。

标签： reactjs react-native redux socket.io react-redux

【解决方案1】：

发现store => next => {} 块在设置时被调用一次，但action => {} 块在每次调度操作时被调用。然后工作代码变为

import io from 'socket.io-client';

import WORKOUT_EVENTS from './constants';

const socketIOReduxMiddleware = store => next => {
    const socket = io("192.168.1.8:8089", {  pingInterval: 3000, pingTimeout: 10000,transports: ["websocket", "polling"]
      });

    WORKOUT_EVENTS.forEach(event => {
        socket.on(event, payload => {
            store.dispatch({ type: event, payload});
        });
    });

    return action => {
        next(action);
    }
}

export default socketIOReduxMiddleware;

【讨论】：