Using socket.io with redux
<p>This is the first time I am going to use <code>socket.io</code> in production. I am using <code>React</code> + <code>Redux</code>. I have recently integrated <code>socket.io</code> with redux and its working fine but I am not sure if it would be the best way to do how I have done. Because I haven't found any sort of proper implementations of socket.io with redux, I need some help/suggestions on ways if I can improve it. </p>

<p>So, for starters I have setup a service for managing sockets all over the app:</p>

<p><strong>Socket.js</strong></p>

<pre><code>import isEmpty from 'lodash/isEmpty';
import io from 'socket.io-client';
import storage from '../storage';

/* eslint-disable no-use-before-define */

const Socket = {
  connect,
  emit,
  on,
  removeListener,
  socket: null
};

/* eslint-enable no-use-before-define */

function connect() {
  const hasAuthenticated = !isEmpty(storage.get('user'));
  if (hasAuthenticated) {
    // Setup a server for testing.
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true });
  }
}

connect();

function on(eventName, callback) {
  if (Socket.socket) {
    Socket.socket.on(eventName, data =&gt; {
      callback(data);
    });
  }
}

function emit(eventName, data) {
  if (Socket.socket) {
    Socket.socket.emit(eventName, data);
  }
}

function removeListener(eventName) {
  if (Socket.socket) {
    Socket.socket.removeListener(eventName);
  }
}

export default Socket;
</code></pre>

<p>I have only used it with a single page, but ofcourse there will be more pages. My redux compositon for that page is:</p>

<p><strong>Dashboard.jsx</strong></p>

<pre><code>componentWillMount() {
    this.props.alertViolations(); // Action
  }

  componentWillUnmount() {
    this.props.unsubscribeViolations(); // Action
  }
</code></pre>

<p><strong>Actions.js</strong></p>

<pre><code>export function alertViolations() {
  return dispatch =&gt; {
    Socket.on('violations', violation =&gt; {
      dispatch(actions.updateViolations(violation));
    });
  };
}

export function unsubscribeViolations() {
  Socket.removeListener('violations');
  return dispatch =&gt; {
    dispatch(actions.removeViolationsListener());
  };
}
</code></pre>

<p>Its working fine. On unmounting it stops listening to the emit function that I have on server. I would really appreciate if I could get some suggestions regarding:</p>

<ul>
<li>Do I need to setup a middleware to managing sockets in a more better
and abstract way? </li>
<li>Is there a better way to manage sockets with redux?</li>
<li>How can I make use of the built in <code>connect</code> and
<code>disconnect</code> functions? </li>
<li>The way I have handled to only build the connection if user has authentication, is that fine? Or could there be a better way to handle this as well?</li>
<li>Oh and also, if I want to remove the connection on logout? Would I just have to removeListeners from all methods or can I use the disconnect function on logout actions?</li>
</ul>

<p>Thanks a lot. Please let me know if I have missed anything in explaining.</p>