在Redux动作中使用SocketIO

Question

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

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

由于我正在使用组件的函数式编程，无法访问componentWillMount，因此在React中需要进行翻译。

我的当前问题是，如果将方法

addNotif

传递给我的组件，每当有新通知到来时，存储就会更新，组件因此被重新渲染，因此它会添加另一个socket.on事件，并且这种情况会持续进行。

有任何解决方法可以干净地解决这个问题吗？ 谢谢！

- sulo

---

这是一个使用Redux处理程序中的套接字的小程序示例，也许会有所帮助。你可以在这里找到更多信息：https://medium.com/@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795 - Sterling Archer

@SterlingArcher 很遗憾它没有！他在Redux中唯一使用socket.on的地方，之后并没有调用该操作（代码中已注释:( ) - sulo

Answer 1

尝试这样定义并导出函数：

将函数定义为以下形式：

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

- Marco

Answer 2

正如您所提到的，您不想在无状态函数中附加事件侦听器。

您想要倒置这个过程：通知到达 > 分发事件。由于您可以从任何地方分派任意redux操作，因此它可以存在于react生命周期之外。

如果该操作未被使用，因为没有客户端，那就没问题。您可以通过redux中间件吸收/解复用事件，并/或使组件分派订阅来微调此设置。

index.js

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

---

notifications.js

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接口抽象化是个好主意，因此这两个文件虽然不是必需的。

- Maroshii

---

嗯，我有点喜欢这种方法，但是我在初始化函数addNotif时遇到了一些问题，它没有作为props传递给子组件，这是一种不好的做法吗？ - sulo

我认为在redux action内部附加事件监听器有些令人困惑。不清楚它是否会再次被调度，从而导致事件监听器泄漏。 - Maroshii