commentsForm dispatches add action

js/components/app.js

@@ -3,20 +3,10 @@ import CommentsList from './CommentsList.js';
 import CommentsForm from './CommentsForm.js';
 
 class App extends React.Component {
-    constructor(props){
-        super(props);
-        this.addComment = this.addComment.bind(this);
-    }
-    addComment(value){
-        this.state.comments.push({ body: value });
-        this.setState({
-            comments: this.state.comments
-        });
-    }
     render() {
         return <section>
             <CommentsList/>
-            <CommentsForm handleSubmit={this.addComment}/>
+            <CommentsForm/>
         </section>
     }
 }

js/components/commentsForm.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux'
 
 class CommentsForm extends React.Component {
     constructor(props){
@@ -17,4 +18,17 @@ class CommentsForm extends React.Component {
     }
 }
 
-export default CommentsForm;
+const mapDispatchToProps = function(dispatch){
+    return {
+        handleSubmit: function(body){
+            dispatch({type:'ADD', comment: { body: body }});
+        }
+    }
+}
+
+const VisibleCommentsForm = connect(
+    null,
+    mapDispatchToProps
+)(CommentsForm)
+
+export default VisibleCommentsForm;

js/index.js

@@ -4,10 +4,6 @@ import App from './components/app.js';
 import { Provider } from 'react-redux'
 import store from './store.js'
 
-store.dispatch({type:'ADD', comment: { body: "fun" }});
-store.dispatch({type:'ADD', comment: { body: "for" }});
-store.dispatch({type:'ADD', comment: { body: "matt" }});
-
 ReactDOM.render(
     <Provider store={store}>
         <App/>