Step 3

Create redux store state for socketio

// app root
// services
   // socketio
      // index.js
      // reducer.js
      // actions.js
      // types.js

// types.js
const CONNECT = 'utter/socketio/CONNECT'
const CONNECT_SUCCESS = 'utter/socketio/CONNECT_SUCCESS'
const CONNECT_FAIL = 'utter/socketio/CONNECT_FAIL'

export {
  CONNECT,
  CONNECT_SUCCESS,
  CONNECT_FAIL
}

// action.js
import {
  CONNECT,
  CONNECT_FAIL,
  CONNECT_SUCCESS
} from './types.js'

const socketConnect = socket => {
  return {
    type: 'socket',
    types: [CONNECT, CONNECT_SUCCESS, CONNECT_FAIL],
    promise: socket => socket.connect()
  }
}

// reducer.js
import _ from 'lodash'
import {CONNECT, CONNECT_FAIL, CONNECT_SUCCESS} from './types.js'

export default (state = {nsp: []}, action = {}) => {
  switch (action.type) {
    case LOAD_SOCKET_NSP:
      return {
        ...state
      }
    case CONNECT:
      return {...state, status: 'connecting'}
    case CONNECT_FAIL:
      return {...state, status: 'connection failed'}
    case CONNECT_SUCCESS:
      if (_.isEmpty(state.nsp)) {
        state.nsp.push(action.result.nsp)
      }
      state.nsp.map((item, index) => {
        if (item !== action.result.nsp) {
          return action.result.nsp
        }
        return null
      })
      return {
        ...state,
        status: 'connected'
      }
    default:
      return state
    }
}

This is an example of integrating socket.io with redux. Here is where you will want to create all of your socket logic(ie. connecting, messaging, namespacing).