Update AJAXRedux.md

master
Matt Huntington 8 years ago committed by GitHub
parent 3746e054fb
commit 772d0d4799
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,14 +5,13 @@ Let's integrate a web API into our [last build](CommentsRedux2.md)
## Lesson Objectives
1. Make an AJAX GET Request Using Fetch
1. Make an AJAX POST Request Using Fetch
1. Create a SET Reducer for the Store
1. Dispatch a SET action appropriately
1. Dispatch a ADD action appropriately
## Make an AJAX GET Request Using Fetch
In `js/index.js` make a test GET request:
In `js/index.js` make a GET request:
```javascript
fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
@ -22,30 +21,6 @@ fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
});
```
## Make an AJAX POST Request Using Fetch
In `js/index.js` make a test POST request:
```javascript
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);
});
});
```
**NOTE** When you're finished with this code, comment it out, so you don't keep creating new comments
## 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.
@ -67,31 +42,17 @@ let comments = function(state = [], action){
## Dispatch a SET action appropriately
Once our `js/components/commentslist.jsx` component mounts, make the approriate AJAX request and dispatch a SET action.
In `index.js`:
```javascript
componentDidMount(){
fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
response.json().then(function(data){
console.log(data);
});
fetch('https://stupidcomments.herokuapp.com/comments').then((response)=>{
response.json().then((data)=>{
store.dispatch({type:'SET', comments:data});
});
}
```
Now dispatch a `SET` action:
```javascript
componentDidMount(){
fetch('https://stupidcomments.herokuapp.com/comments').then(function(response){
response.json().then(function(data){
store.dispatch({type:'SET', comments:data});
});
});
}
});
```
## Dispatch a ADD action appropriately
## Dispatch an ADD action appropriately
In `js/components/commentsform.jsx` alter the `handleSubmit` property to make an AJAX POST request:

Loading…
Cancel
Save