title: React-Redux and Websockets with socket.io
body: <p>I'm new with that technology React-Redux and I would like your help with some implementation.</p>
  
  <p>I want to implement one chat application with sockets (socket.io). First, the user has to sign up (I use passport in the server side) and after, if the sign up is successful the user has to connect to the webSocket.</p>
  
  <p>I thought that the best will be to use a middleware like a pipe for all the actions and depending of what kind of action gets the middleware, do different things.</p>
  
  <p>If the action type is <code>AUTH_USER</code>, create client-server connection and set up all the events which will come from the server.</p>
  
  <p>If the action type is <code>MESSAGE</code> send to the server the message.</p>
  
  <p>Code Snippets:</p>
  
  <p><strong>----- socketMiddleware.js ----</strong></p>
  
  <pre><code>import { AUTH_USER,  MESSAGE } from '../actions/types';
  
  import * as actions from 'actions/socket-actions';
  
  import io from 'socket.io-client';
  
  const socket = null;
  
  export default function ({ dispatch }) {
  
      return next =&gt; action =&gt; {
  
          if(action.type == AUTH_USER) {
  
              socket = io.connect(`${location.host}`);
  
              socket.on('message', data =&gt; {
  
                 store.dispatch(actions.addResponse(action.data));
  
              });
  
          }
  
          else if(action.type == MESSAGE &amp;&amp; socket) {
  
              socket.emit('user-message', action.data);
  
              return next(action)
  
          } else {
              return next(action)
          }
      }
  
  }
  </code></pre>
  
  <p><strong>------ index.js -------</strong></p>
  
  <pre><code>import {createStore, applyMiddleware} from 'redux';
  
  import socketMiddleware from './socketMiddleware';
  
  
  
  const createStoreWithMiddleware = applyMiddleware(
  
    socketMiddleware
  
  )(createStore);
  
  const store = createStoreWithMiddleware(reducer);
  
  &lt;Provider store={store}&gt;
  
      &lt;App /&gt;
  
  &lt;/Provider&gt;
  </code></pre>
  
  <p>What do you think about that practise, is it a better implementation?</p>