Commit 2 for Part3

https://valentinmk.gitbooks.io/react-redux-socket-tutorial/content/Part3.html

src/components/SocketExampleComponents/SocketConnectionLog.js

@@ -1,7 +1,13 @@
-import React, {Component} from 'react';
+import React, {Component, PropTypes} from 'react';
 
 export default class SocketConnectionLog extends Component {
+  static propTypes = {
+    loaded: PropTypes.bool,
+    message: PropTypes.string,
+    connected: PropTypes.bool
+  }
   render() {
+    const {loaded, message, connected} = this.props;
     return (
       <div>
         <h3>Socket connection log</h3>
@@ -10,9 +16,11 @@ export default class SocketConnectionLog extends Component {
           rows="1"
           readOnly
           placeholder="Waiting ..."
-          value="
+          value={'index =' + 0 + ', loaded = ' + loaded + ', message = ' + message + ', connected = ' + connected}/>
+          {/* value="
             index = 2, loaded = true, message = Connected, connected = true
             index = 1, loaded = false, message = Connecting..., connected = false"/>
+          */}
         <button className="btn btn-primary btn-sm">
           <i className="fa fa-sign-in"/> Connect
         </button>

src/containers/SocketExample/SocketExamplePage.js

@@ -1,16 +1,30 @@
-import React, {Component} from 'react';
+import React, {Component, PropTypes} from 'react';
 import Helmet from 'react-helmet';
 import {SocketConnectionLog} from 'components';
 import {SocketMessageLog} from 'components';
+import {connect} from 'react-redux';
+import * as socketExampleActions from 'redux/modules/socketexamplemodule';
+
+@connect(
+  state => ({
+    loaded: state.socketexample.loaded,
+    message: state.socketexample.message,
+    connected: state.socketexample.connected}),
+  socketExampleActions)
 
 export default class SocketExamplePage extends Component {
+  static propTypes = {
+    loaded: PropTypes.bool,
+    message: PropTypes.string,
+    connected: PropTypes.bool
+  }
   render() {
+    const {loaded, message, connected} = this.props;
     return (
       <div className="container">
         <h1>Socket Exapmle Page</h1>
         <Helmet title="Socket Exapmle Page"/>
-        <p>Sockets not connected</p>
-        <SocketConnectionLog />
+        <SocketConnectionLog loaded={loaded} message={message} connected={connected} />
         <SocketMessageLog/>
       </div>
     );