Redux + Websockets

component.js

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { initializeSocket } from './redux/socket.js';

class App extends React.Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    socket: PropTypes.object.isRequired,
  };
  
  componentWillMount() {
    const { dispatch } = this.props;
    
    dispatch(initializeSocket());
  }
  
  render() {
    const { socket } = this.props;
    
    return socket.connected
      ? <div>Connected!</div>
      : <div>Connecting...</div>;
  }
}

function mapStateToProps(state) {
  return {
    socket: state.socket,
  };
}

export default connect(mapStateToProps)(App);

entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import configureStore from './store';
import { Provider } from 'react-redux';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

root-reducer.js

import { combineReducers } from 'redux';
import socket from './socket';
import otherReducer from './other-reducer';

const rootReducer = combineReducers({
  socket,
  otherReducer,
});

export default rootReducer;

socket.js

const SOCKET_CONNECTION_INIT = 'SOCKET_CONNECTION_INIT';
const SOCKET_CONNECTION_SUCESS = 'SOCKET_CONNECTION_SUCCESS';
const SOCKET_CONNECTION_ERROR = 'SOCKET_CONNECTION_ERROR';
const SOCKET_CONNECTION_CLOSED = 'SOCKET_CONNECTION_CLOSED';
const SOCKET_MESSAGE = 'SOCKET_MESSAGE';

const initialState = {
  connected: false,
  readyState: null,
  socket: null,
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SOCKET_CONNECTION_INIT:
      return Object.assign({}, state, {
        connected: false,
        socket: action.socket,
      });

    case SOCKET_CONNECTION_SUCCESS:
      return Object.assign({}, state, {
        connected: true,
      });

    case SOCKET_CONNECTION_ERROR:
      return Object.assign({}, state, {
        connected: false,
      });

    case SOCKET_CONNECTION_CLOSED:
      return Object.assign({}, state, {
        connected: false,
        socket: null,
      });

    case SOCKET_MESSAGE:
      // Do your logic here with action.data
      // example handleIncomingMessage(action.data)
      return state;

    default:
      return state;
  }
}

export function initializeSocket() {
  return (dispatch) => {
    const socket = new WebSocket('ws://foo.com');
    dispatch(socketConnectionInit(socket));

    socket.onopen = function() {
      dispatch(socketConnectionSuccess());  
    };
    
    socket.onerror = function() {
      dispatch(socketConnectionError());  
    };

    socket.onmessage = function (event) {
      dispatch(socketMessage(event.data));
    };

    socket.onclose = function() {
      dispatch(socketConnectionClosed());
    };
  };
}

function socketConnectionInit(socket) {
  return {
    type: SOCKET_CONNECTION_INIT,
    socket,
  };
}

function socketConnectionSuccess() {
  return {
    type: SOCKET_CONNECTION_SUCESS,
  };
}

function socketConnectionError() {
  return {
    type: SOCKET_CONNECTION_ERROR,
  };
}

function socketConnectionClosed() {
  return {
    type: SOCKET_CONNECTION_CLOSED,
  };
}

function socketMessage(data) {
  return {
    type: SOCKET_MESSAGE,
    data,
  };
}

store.js

import rootReducer from '~/root-reducer';
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

export default function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunkMiddleware)
  );

  return store;
}

You could dispatch a message to the server