react-notes/AJAXRedux.md

Using AJAX With Redux

Let's integrate a web API into our last build

Lesson Objectives

1. Make an AJAX GET Request Using Fetch
2. Create a SET Reducer for the Store
3. Dispatch a SET action appropriately
4. Dispatch a ADD action appropriately

Make an AJAX GET Request Using Fetch

In js/index.js make a GET request:

fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
    response.json().then(function(data){
        console.log(data);
    });
});

Create a SET Reducer for the Store

Our plan is the make a GET request to our API and then set the store to the response's values.

Create a SET Reducer in js/store.js:

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

Dispatch a SET action appropriately

In index.js:

fetch('https://stupidcomments.herokuapp.com/comments').then((response)=>{
    response.json().then((data)=>{
        store.dispatch({type:'SET', comments:data});
    });
});

Dispatch an ADD action appropriately

In js/components/commentsform.jsx alter the createComment property to make an AJAX POST request:

const mapDispatchToProps = function(dispatch){
    return {
        createComment: function(comment){
            fetch(
                'https://stupidcomments.herokuapp.com/comments',
                {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    method: "POST",
                    body: JSON.stringify(comment)
                }
            ).then(function(response){
                response.json().then(function(data){
                    console.log(data);
                });
            });
        }
    }
}

We can see that data has a body property that we want to use in our dispatch in js/components/commentsform.jsx:

response.json().then(function(data){
    dispatch({type:'ADD', comment: data });
});