ajax with redux

js/components/commentsform.jsx

@@ -21,7 +21,22 @@ class CommentsForm extends React.Component {
 const mapDispatchToProps = function(dispatch){
     return {
         handleSubmit: function(body){
-            dispatch({type:'ADD', comment: body });
+            fetch(
+                'https://stupidcomments.herokuapp.com/comments',
+                {
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json'
+                    },
+                    method: "POST",
+                    body: JSON.stringify({ body:body })
+                }
+            ).then(function(response){
+                response.json().then(function(data){
+                    console.log(data);
+                    dispatch({type:'ADD', comment: data.body });
+                });
+            });
         }
     }
 }

js/components/commentslist.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import store from '../store.js';
 
 class CommentsList extends React.Component {
     render(){
@@ -10,6 +11,16 @@ class CommentsList extends React.Component {
         </ul>
 
     }
+    componentDidMount(){
+        fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
+            response.json().then(function(data){
+                let commentsArray = data.map(function(comment){
+                    return comment.body
+                });
+                store.dispatch({type:'SET', comments:commentsArray});
+            });
+        });
+    }
 }
 
 const mapStateToProps = function(state){

js/index.js

@@ -4,6 +4,27 @@ import Comments from './components/comments.jsx';
 import { Provider } from 'react-redux';
 import store from './store.js';
 
+// fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
+//     response.json().then(function(data){
+//         console.log(data);
+//     });
+// });
+// fetch(
+//     'https://stupidcomments.herokuapp.com/comments',
+//     {
+//         headers: {
+//             'Accept': 'application/json',
+//             'Content-Type': 'application/json'
+//         },
+//         method: "POST",
+//         body: JSON.stringify({ body:'again from react' })
+//     }
+// ).then(function(response){
+//     response.json().then(function(data){
+//         console.log(data);
+//     });
+// });
+
 ReactDOM.render(
     <Provider store={store}>
         <Comments></Comments>

js/store.js

@@ -4,6 +4,8 @@ let comments = function(state = [], action){
     switch(action.type){
         case 'ADD':
             return [...state, action.comment];
+        case 'SET':
+            return action.comments
         default:
             return state
     }