Javascript 在redux操作中使用socketio

我正在尝试使用React、Redux和socket.io构建一个应用程序！ 我的问题是：如何初始化事件侦听器（Redux中的操作），如下所示：

export const addNotif = () => (dispatch) => {
  socket.on('notification', (message) => {
    dispatch(notification(message))
  })
}

在React中，由于我在组件上使用函数编程，因此没有访问组件的权限时将挂载

我现在的问题是如果我通过了这个方法

addNotif

对于我的组件，每次新通知到来时，存储都会更新，因此该组件会重新呈现，因此它会添加另一个socket.on事件，这将继续进行

关于如何以干净的方式解决这个问题，有什么想法吗？

---

谢谢

尝试如下定义和导出函数：

export const addNotif = (dispatch) => {
  socket.on('notification', (message) => {
    dispatch(notification(message))
  })
}

---

正如您所提到的，您不希望在无状态函数中附加事件侦听器。 您要反转此选项：

通知进入>调度事件

。这可能存在于react的生命周期之外，因为您可以从任何地方调度任意的redux操作

如果因为没有客户端而没有使用该操作，则可以。您可以通过吸收/分离redux中间件中的事件和/或让组件分派订阅来对此进行微调

index.js

// start() should be called ONCE wherever you have access to the store 
const notifications = require('./notifications');
notifications.start(store.dispatch);

export default {
  start(dispatch) {
    socker.on('connect', () => {
      console.log('Subscribed to notifications');
    });
    socket.on('notification', (payload) => {
      dispatch(({ type: "NOTIF", payload }));
    });
    socket.on('error', (message) => {
      console.log('TODO: handle error');
    })
  },
};

---

notifications.js

// start() should be called ONCE wherever you have access to the store 
const notifications = require('./notifications');
notifications.start(store.dispatch);

export default {
  start(dispatch) {
    socker.on('connect', () => {
      console.log('Subscribed to notifications');
    });
    socket.on('notification', (payload) => {
      dispatch(({ type: "NOTIF", payload }));
    });
    socket.on('error', (message) => {
      console.log('TODO: handle error');
    })
  },
};

---

抽象掉socketio接口可能是一个好主意，因此这两个文件虽然不是必需的。

下面是一个在redux处理程序中使用套接字的小程序示例，它可能有助于bit@SterlingArcher可悲的是，事实并非如此！他在Redux中使用socket.on的唯一地方是，之后他不会调用操作（代码中有注释：（）嗯，我有点喜欢这种方法，但是我需要在容器中初始化函数addNotif，而不是将其作为道具提供给孩子，这是一种不好的做法吗？我认为在redux操作中附加事件侦听器有点令人困惑。不清楚它是否会再次被调度，从而导致事件泄漏听众。