title: Using socket.io with redux
body: <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>