Redux 和 socket.io 无限循环答案

【问题标题】：Redux and socket.io infinite loopRedux 和 socket.io 无限循环
【发布时间】：2019-08-06 00:56:35
【问题描述】：

我正在尝试使用socket.io 和redux-socket.io 来让多个客户端的数据存储保持同步。

每个客户端都将获取他们自己的初始“待办事项”列表，这些列表将被放入他们的 redux 存储中。

然后当一个客户端执行并添加、更新或删除时，我希望它广播给其他客户端以更新他们自己的 redux 存储；这就是我所拥有的 -

客户端设置

let socketIoMiddleware = createSocketIoMiddleware(socket, (type, action) => {
  // emit to server if one of these actions
  return (type === 'ADD_TODO_SUCCESS' || 
    type === 'UPDATE_TODO_SUCCESS' ||
    type === 'DELETE_TODO_SUCCESS')
});

服务器

socket.on('action', (action) => {
        socket.broadcast.emit('action', action);
    }
}

我的目标是不必更改我的 redux 代码，只需插入 socket.io，但我认为正在发生的事情是，例如：

客户A：dispatch({type: 'UPDATE_TODO_SUCESS', payload: todo });
中间件：emit('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
socket.io 服务器：broadcast('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
客户B：on('action', dispatch({type: 'UPDATE_TODO_SUCESS', payload: todo });
中间件：emit('action', {type: 'UPDATE_TODO_SUCESS', payload: todo });
...无限循环！

如何向其他客户端广播更新，而不会导致这个无限循环，也不必在我的 reducer 中处理一堆其他动作类型？

【问题讨论】：

标签： redux websocket socket.io

【解决方案1】：

我想出的解决方案是使用布尔值 broadcast 属性来扩充操作对象，该属性用于决定 redux-socket.io 是否应该将消息发送到服务器。

second parameter of createSocketIoMiddleware 可以是 "...如果应该将操作发送到 socket.io，则返回真值的函数"

客户端设置

let socketIoMiddleware = createSocketIoMiddleware(socket, (type, action) => {
  // emit to server if action has property "broadcast: true"
  return action.broadcast;
});

示例操作：

const addTodo = todo => {
   return {
      type: 'ADD_TODO_SUCCESS,
      todo: todo,
      broadcast: true
   };
};

服务器设置

socket.on('action', (action) => {
   // turn broadcast off so subscriber doesn't turn around and publish
   if(action.broadcast) {
      action.broadcast = false;
   }
   socket.broadcast.emit('action', action);
 }
}

【讨论】：