Let's type out a function. Let's say:

requests.js

export function fetchRequests() {
    const token = localStorage.getItem('token');
    return function() {
        axios.get(`${ROOT_URL}/requests`, {
            headers: { authorization: token }
        })
            .then(response => {
                console.log(response.data);
                //  dispatch an action to set our requests
            })
            .catch(err => {
                console.log(err);
            })
    }
}

Let's see if this is working, and then we will do that. Running this function should log this in a different format, like an object format or a collection format to the console. Let's go into our requests and have it fetch this when we go to that tab. Let's go to requestsGrid.js, and let's say:

requestsGrid.js

class RequestsGrid extends Component {

    handleAddRequest = () => {
        this.props.history.push('/request/new');
    }

    componentDidMount() {
        this.props.fetchRequests()
    }

Just to iterate over what we've done in this video so far, to make it clear, We've typed out another action creator from line 36 on my screen to line 50 in requests.js hitting the endpoint requests. We passed in a header: authorization: token.

In requestsGrid.js we are calling that function in these three lines when the component mounts. Now, before we can actually call this function, we have to hook up this component to Redux, so let's go up here and say:

requestsGrid.js

import { connect } from 'react-redux';
import * as actions from '../../actions';

We're going to go out of this directory, and out of the components directory to get to our actions. Let's hook it up now. Let's say:

requestsGrid.js

RequestsGrid = connect(null, actions)(RequestsGrid)

Now, what we need to do is see what this is doing. We need a check our store and see if this is actually fetching them from our server. Let's log in, let's go to requests, and we get an error. Let's check the console. It says that fetchRequest is not a function.

This is pretty simple. Basically, the reason it's doing this is because in our index.js in actions, we're not importing and exporting it. We need to import fetchRequests and then we need to export it down here. Now we're importing and exporting it.

Let's go back to our application, log in again, and click the requests tab. It should be fetching it. Sweet. You'll see that we're receiving 4 items back from our server If you did this correctly. Basically, it's all of our items here.

It's exactly what we're seeing in Mongo here in the terminal. 4 items, and they're all in order. Now that we're getting this data, we need to somehow throw it into our Request Items here, because we need to display that, and not this.

We have an imageUrl in there as well, so we'll have to map it in there to get it from our server. I'll show you how to do that too. Point is we are getting our items. Everything's good. We're good to go.

Let's go ahead and commit our code, and then move on. Let's get this done as fast as possible. Let's say git status, git add ., and let's say git commit -m "created fetchRequests action creator".

Resources

• Source Code