Add redux-thunk.

package.json

@@ -24,7 +24,8 @@
     "react-dom": "0.14.7",
     "react-redux": "4.4.0",
     "redux": "3.3.1",
-    "redux-form": "~4.2.0"
+    "redux-form": "~4.2.0",
+    "redux-thunk": "~2.0.1"
   },
   "devDependencies": {
     "babel-cli": "6.5.1",

src/actions/socketHandlerActions.js

@@ -17,7 +17,7 @@ export default {
         type: SOCKET_SET_ERROR
     }),
 
-    onopen: event => ({
+    onopen: event => (dispatch, getState) => ({
         type: SOCKET_SET_OPEN
     }),
 

src/components/ConnectForm.js

@@ -2,12 +2,12 @@ import React, {PropTypes} from "react";
 import {reduxForm} from "redux-form";
 
 import { STATE_CLOSED } from "../constants/socket";
-
+import ControlRequest from "../utils/ControlRequest";
 
 const ConnectForm = (props) => {
-    const { fields: { url }, handleSubmit, socket, socketOpen } = props;
+    const { fields: { url }, handleSubmit, socket, socketActions } = props;
     const submit = (values, dispatch) => {
-        dispatch(socketOpen(values.url));
+        dispatch(socketActions.open(values.url));
     };
     return (
         <form onSubmit={handleSubmit(submit)}>
@@ -24,7 +24,7 @@ ConnectForm.propTypes = {
     fields: PropTypes.object.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     socket: PropTypes.object.isRequired,
-    socketOpen: PropTypes.func.isRequired
+    socketActions: PropTypes.object.isRequired
 };
 
 export default reduxForm({

src/components/SolsticeApp.js

@@ -11,7 +11,7 @@ const SolsticeApp = (props) => {
         return (
             <main>
                 <ConnectForm socket={socket}
-                    socketOpen={actions.socketActions.open}/>
+                    socketActions={actions.socketActions}/>
                 <SocketStatusPane {...socket} />
             </main>
         );

src/store/configureStore.dev.js

@@ -2,17 +2,19 @@
 //This boilerplate file is likely to be the same for each project that uses Redux.
 //With Redux, the actual stores are in /reducers.
 
-import { createStore } from 'redux';
-import rootReducer from '../reducers';
+import { createStore } from "redux";
+import rootReducer from "../reducers";
 
-export default function configureStore(initialState) {
-  let store;
+export default function configureStore(initialState, enhancer) {
+  let createStoreModded;
   if (window.devToolsExtension) { //Enable Redux devtools if the extension is installed in developer's browser
-    store = window.devToolsExtension()(createStore)(rootReducer, initialState);
+    createStoreModded = window.devToolsExtension()(createStore);
   } else {
-    store = createStore(rootReducer, initialState);
+    createStoreModded = createStore;
   }
 
+  const store = createStoreModded(rootReducer, initialState, enhancer);
+
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers', () => {

src/store/configureStore.js

@@ -1,5 +1,11 @@
+import { applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+let configureStore;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./configureStore.prod');
+  configureStore = require('./configureStore.prod').default;
 } else {
-  module.exports = require('./configureStore.dev');
+  configureStore = require('./configureStore.dev').default;
 }
+
+export default () => configureStore(undefined, applyMiddleware(thunk));

src/store/configureStore.prod.js

@@ -1,6 +1,6 @@
 import { createStore } from 'redux';
 import rootReducer from '../reducers';
 
-export default function configureStore(initialState) {
-  return createStore(rootReducer, initialState);
+export default function configureStore(initialState, enhancer) {
+  return createStore(rootReducer, initialState, enhancer);
 }

src/utils/ControlMessage.js

@@ -1,9 +0,0 @@
-export default {
-    login: (username, password) => ({
-        "variant": "LoginRequest",
-        "fields": [{
-            "username": username,
-            "password": password,
-        }]
-    })
-};

src/utils/ControlRequest.js

@@ -0,0 +1,11 @@
+export default {
+    loginStatus: () => ({
+        "variant": "LoginStatusRequest",
+        "fields": []
+    }),
+
+    roomList: () => ({
+        "variant": "RoomListRequest",
+        "fields": []
+    })
+};