So I'm going to go ahead and I'm going to head into index.js where we're saying hello and I'm going to get rid of these two things and actually perform the request. Now to do this we need to utilize AXIOS so in the terminal here I am gonna say npm install --save axios. All right that should be good. Let's go ahead and return this a couple of times, we're going to import axios from 'axios' and I'm going to type out the request.

Now, this isn't going to work until it's installed so just make sure it's installed. And then here I'm just going to say axios.get() because we are performing a get request and the same link we have in postman that we were using or the same one in here we were using so https://api.dailysmarty.com/posts

I am going to copy that go back to the app paste it in and let's do something with this. We will put .then() super simple using axios, it's pretty close to a promise and we might as well go back and look at how to do it with a promise later on. So just be prepared for that. Probably after we deploy the completed app to Heroku. So in here we just want to say okay what's our response console.log(response.data) and we will see what we get. It should be the exact way we get it in postman but we have to be specific here and see if we are getting it. So you'll notice it reloads and we have a post here we have an object with a post array containing our posts. Really really awesome stuff.

So the first thing I'd like to point out is that this is an array of posts, not just the post so what we can do is console.log(response,data.posts). This will allow us to see all of our posts without this extra object around it. So now we have just our posts.

     export function fetchRecentPosts() {
         return function(dispatch) {
            axios.get('https://api.dailysmarty.com/posts')
            .then(response => {
                console.log(response.data.posts);

Now let's go ahead and do something with this data and in order to do anything with the data we have to somehow get it into our reducers. Now, do you remember how to do that? Go ahead and pause the video and try creating an action that you can dispatch to reducer to see if we can get the data in there. If you're unable to do that or you just want to follow along just follow along with me and let's write this action. So we need to create a file in our actions folder called types.js and in here we just need to create an action and let's call it export const and let's call it SET_RECENT_POSTS = SET_RECENT_POSTS let's save that and close out the types.

And let's import into here, let's put it above axios because I would like the actions to be at the top of the file since this is the actions index file. import { SET_RECENT_POSTS } from './types'.

Now in here, we need to dispatch this. So when we get our data we want to say dispatch({ type: SET_POSTS,}) and thepayload: response.data.posts`. So save this and let's actually handle this in our reducer.

So let's go to our index.js/reducers. We need to create a new file so let's call this postsReducer.js and in here we just need to set up our basically our default scaffolding for reducer which is pretty easy we just need to import our actions so import let's import our only actions SET_RECENT_POSTSand say from '../actions/types'. Now that will give us access to our action which we can then determine, we can use in our switch statement to see if we're hitting that action. So now we just need to declare an initial state and const INIT_STATEand then we want to have posts for the post we're going to fetch and then we also need recentPosts for the one we're dealing with right now let's go ahead and type out our function export default function() and remember what this takes it takes in state = INIT_STATE, action.

import {
    SET_RECENT_POSTS
} from '../actions/types';

const INIT_STATE = {
    posts: [],
    recentPosts: []
}
export default function(state = INIT_STATE, action)

Now we can switch through our action.types and determine which action we're hitting. So let's type out a javascript switch statement and in VS Code if you hit down on the arrow key when you're writing it. You'll see it says switch statement in javascript that will give you the basic kind of skeleton of a switch statement. For the key we want action.type for the value we want to put in the SET_RECENT_POSTSand then we want to be returning state in all of these cases so for default let's just say return state and for this one let's map it out so let's get all of our data and map it all out and then we want to overwrite recentPostsand let's put action.payload. Because we know our action.payload in our actions is the posts which we just saw in here is the posts. So let's go ahead and go back to our code and this should be working. Let's go ahead and test it out on the browser. Let's reload the page. And it says it gets our data which is great but that says referenceError: SET_POSTS is not defined. Let's go check it out and see, so the reason it's not defined is that we need to call it SET_RECENT_POSTS.

Ok let's go back to our application and you'll see nothing happens really important. Nothing you can really see but this happens. And that's because we can't really see the data. Let's go ahead and just log it out in map state to props. And this guide is going on a bit long so what we'll do is end the guide here and then the next guide we will go over redux dev tools again and how we can see it there and then will also log it in our map state to props in our searchBar.js we will use map state to props. Or maybe your home.js. Not sure yet we'll see. So let's commit our code

git status
git add .
git commit -m "used axios to perform get request to fetch recents posts and setup the required reducer"  

Ok, I will catch you in the next guide where we will finish this off by talking about map state to props and the dev tools finish off this part of this component the functionality of it. So I will see you in the next guide.

Resources

Source code