You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.2 KiB
90 lines
2.2 KiB
# Using AJAX With Redux
|
|
|
|
Let's integrate a web API into our [last build](CommentsRedux2.md)
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Make an AJAX GET 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 GET request:
|
|
|
|
```javascript
|
|
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`:
|
|
|
|
```javascript
|
|
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`:
|
|
|
|
```javascript
|
|
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 `handleSubmit` property to make an AJAX POST request:
|
|
|
|
```javascript
|
|
const mapDispatchToProps = function(dispatch){
|
|
return {
|
|
handleSubmit: 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`:
|
|
|
|
```javascript
|
|
response.json().then(function(data){
|
|
dispatch({type:'ADD', comment: data });
|
|
});
|
|
```
|