comments list hooked up to redux

js/components/commentsList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 class CommentsList extends React.Component {
     render() {
@@ -10,4 +11,14 @@ class CommentsList extends React.Component {
     }
 }
 
-export default CommentsList;
+const mapStateToProps = function(state){
+    return {
+        comments: state
+    }
+}
+
+const VisibleCommentsList = connect(
+    mapStateToProps
+)(CommentsList);
+
+export default VisibleCommentsList;

js/index.js

@@ -1,8 +1,16 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 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(
-  <App/>,
-  document.querySelector('main')
+    <Provider store={store}>
+        <App/>
+    </Provider>,
+    document.querySelector('main')
 );

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;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-redux",
+  "name": "react-redux-test",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -23,6 +23,8 @@
     "babel-preset-react": "^6.24.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-redux": "^5.0.4",
+    "redux": "^3.6.0",
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.5"
   }