From b623f941bf3f65b92879d2b47d0bc8163c8e5198 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 22 May 2017 22:14:59 -0400
Subject: [PATCH] redux working

---
 js/components/comments.jsx     | 17 ++---------------
 js/components/commentsform.jsx | 16 +++++++++++++++-
 js/components/commentslist.jsx | 13 ++++++++++++-
 js/index.js                    |  8 ++++++--
 js/store.js                    | 14 ++++++++++++++
 package.json                   |  4 +++-
 6 files changed, 52 insertions(+), 20 deletions(-)
 create mode 100644 js/store.js

diff --git a/js/components/comments.jsx b/js/components/comments.jsx
index c24dda4..3ec4d5e 100644
--- a/js/components/comments.jsx
+++ b/js/components/comments.jsx
@@ -3,23 +3,10 @@ import CommentsList from './commentslist.jsx'
 import CommentsForm from './commentsform.jsx'
 
 class Comments extends React.Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            comments: []
-        }
-        this.addComment = this.addComment.bind(this);
-    }
-    addComment(value){
-        this.state.comments.push(value); //this alone won't notify React to update the DOM
-        this.setState({
-            comments: this.state.comments
-        });
-    }
     render(){
         return <section>
-            <CommentsList comments={this.state.comments}></CommentsList>
-            <CommentsForm handleSubmit={this.addComment}></CommentsForm>
+            <CommentsList></CommentsList>
+            <CommentsForm></CommentsForm>
         </section>
     }
 }
diff --git a/js/components/commentsform.jsx b/js/components/commentsform.jsx
index 2839a6f..6454056 100644
--- a/js/components/commentsform.jsx
+++ b/js/components/commentsform.jsx
@@ -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 });
+        }
+    }
+}
+
+const VisibleCommentsForm = connect(
+    null,
+    mapDispatchToProps
+)(CommentsForm)
+
+export default VisibleCommentsForm;
diff --git a/js/components/commentslist.jsx b/js/components/commentslist.jsx
index 4f12522..b39c4b3 100644
--- a/js/components/commentslist.jsx
+++ b/js/components/commentslist.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 class CommentsList extends React.Component {
     render(){
@@ -11,4 +12,14 @@ class CommentsList extends React.Component {
     }
 }
 
-export default CommentsList;
+const mapStateToProps = function(state){
+    return {
+        comments: state
+    }
+}
+
+const VisibleCommentsList = connect(
+    mapStateToProps
+)(CommentsList);
+
+export default VisibleCommentsList;
diff --git a/js/index.js b/js/index.js
index 00044c4..3248c71 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,8 +1,12 @@
-import ReactDOM from 'react-dom';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Comments from './components/comments.jsx';
+import { Provider } from 'react-redux';
+import store from './store.js';
 
 ReactDOM.render(
-    <Comments></Comments>,
+    <Provider store={store}>
+        <Comments></Comments>
+    </Provider>,
     document.querySelector('main')
 );
diff --git a/js/store.js b/js/store.js
new file mode 100644
index 0000000..747588c
--- /dev/null
+++ b/js/store.js
@@ -0,0 +1,14 @@
+import { createStore } from 'redux'
+
+let comments = function(state = [], action){
+    switch(action.type){
+        case 'ADD':
+            return [...state, action.comment];
+        default:
+            return state
+    }
+}
+
+let store = createStore(comments);
+
+export default store;
diff --git a/package.json b/package.json
index b0e41f9..a1a61e2 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-      "build": "webpack-dev-server --open"
+    "build": "webpack-dev-server --open"
   },
   "author": "",
   "license": "ISC",
@@ -15,6 +15,8 @@
     "babel-preset-react": "^6.24.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
     "webpack": "^2.5.1",
     "webpack-dev-server": "^2.4.5"
   }