在 redux 操作中使用 socketio

Question

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

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

在 React 中没有访问 componentWillMount 因为我在组件上使用函数式编程。

我目前的问题是，如果我通过方法

添加通知

对于我的组件，每次收到新通知时，商店都会更新，因此组件会重新渲染，因此它会添加另一个 socket.on 事件，并且会继续进行。

关于如何以干净的方式解决这个问题的任何想法？ 谢谢！

Answer 1

尝试像这样定义和导出函数：

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

Answer 2

正如您所提到的，您不想在无状态函数中附加事件侦听器。 你想反转这个：notification comes in > dispatch event。这可以存在于 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);

---

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