时间戳

首页 > 解决方案 > Redux 操作使“on”套接字事件加倍

javascript - Redux 操作使“on”套接字事件加倍

问题描述

我有用 Reactjs 和 Redux 编写的应用程序。使用 axios 它运行良好，但我想使用 socket.io，所以在尝试的 redux 操作中：

export const getOne = (id) => async dispatch => {
  socket.emit('getOne', id);

  console.log('test');

  socket.on('get', function(msg) {
    console.log(msg);
    dispatch({ type: GET, payload: msg });
  });
};

如果我第一次调用此操作，一切正常 - 发出套接字，函数返回正确的 msg 和 console.log 返回“测试”，但如果我再次调用此函数，则调用 console.log（这没关系)，但不幸的是“socket.on”被调用了两次。接下来如果我点击，那么“socket.on”函数会被调用三次等等......

我什么时候应该把我的功能socket.on('get', function(msg)？或者我能用这个问题做什么？

标签： javascriptnode.jsreactjsreduxsocket.io

解决方案

您需要将“socket.on”移出功能。每次调用这个函数，它都会一次又一次地绑定：

     socket.on('get', function(msg) {
        console.log(msg);
        dispatch({ type: GET, payload: msg });
     });

    export const getOne = (id) => async dispatch => {
      socket.emit('getOne', id);
      console.log('test');
    };

推荐阅读