Let's go to our application and create it. Let's go into types.js, and let's say:

types.js

export const SET_REQUESTS = 'SET_REQUESTS';

I just want to clarify that we have SET_NEWSLETTERS. We just haven't thrown in the GET-Request for it. We're just manually hard-coding it in. When we get to this it'll be pretty quick, we just have to throw in a couple requests. So we're good there. Let's go ahead and get out of here.

Let's go into fetchRequests or our requests.js file, and let's dispatch this action here. Let's pass in dispatch to this function. We have access to it via Redux-Thunk. Let's say:

requests.js

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

Let's get rid of this console.log and we're dispatching the requests. Type that in requests.js. Let's scroll up and import this type, SET_REQUESTS from types. Let's go back to types.js and make sure it's the same thing.

Now, let's close that and let's go to our Reducers and handle this. Let's go to requestsReducer.js. In here, we want to handle a case of SET_REQUESTS. Now what we want to do is import SET_REQUESTS and then let's say:

requestsReducer.js

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case CHANGE_SELECTED_REQUEST_TYPE:
            const boxType = action.payload
            return {
                ...state,
                selectedRequestType: boxType
            }
        case SET_REQUESTS: 
            return {
                ...state,
                requests: action.payload
            }
        default: return state;
    }
}

Pretty simple stuff. We're just getting our data here. No matter what the select or request type is, and we're spreading it out and overwriting requests with our fetched requests. Now we should have access to our request in Redux DevTools. Let's log in once we fetch them.

Let's inspect, and go to left, and you'll see it's empty. We just have empty requests.

When we hit requests now, it's going to fill that with our requests from the server. Really awesome stuff. Now, we can do something with it.

Let's go ahead and take these using mapStateToProps and iterate over them and get them in here right now. Let's go to our code. Now that we know that we have them, we can just use mapStateToProps. Let's go over to requests.js in components.

In components / requests.js, instead of just hard-coding these, let's get rid of them. Let's hook up Redux and map over them instead. So let's say:

requests.js

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

Instead of just exporting Requests, let's just say:

requests.js

export default connect(mapStateToProps)(Requests);

We don't actually need actions, so we can just pass in mapStateToProps and the Requests. We can get rid of this import actions since we don't need it. Let's write out our mapStateToProps function, and instead of just returning state, let's get our requests out of our reducers. So let's say:

requests.js

function mapStateToProps(state) {
    const { requests } = state.requests;
    return {

    }
}

We're getting it out of our requestsReducer.js and then we're getting our requestReducer and then getting Requests out. This is exactly like typing const requests = state.requests.requests;. You can do either way, whatever you prefer. Now, let's just return requests.

requests.js

function mapStateToProps(state) {
    const { requests } = state.requests;
    return {
        requests
    }
}

That's hooked up now. This won't do anything because we're not mapping over them yet, but we have access to the data and our props now, which is really nice. Let's go in here, and let's say:

requests.js

class Requests extends Component {
    render() {
        return (
            <div className='requests'>
                {
                    this.props.requests.map(requestItem => {
                        <RequestsItem {...requestItem} key={requestItem._id}/>
                    })
                }
            </div>
        )
    }
}

This should render the amount out now. This is going to render 4 out instead of 3, but it's not actually going to provide us with any meaningful data. We haven't mapped it over properly in requestsItem.js yet. Let's just look at what this looks like, and let's do that.

Open up chrome, log in, go to requests, we get our data and nothing happened. We didn't return these items, so in this, we need to say return.

requests.js

class Requests extends Component {
    render() {
        return (
            <div className='requests'>
                {
                    this.props.requests.map(requestItem => {
                        return <RequestsItem {...requestItem} key={requestItem._id}/>
                    })
                }
            </div>
        )
    }
}

Now, that should be good. Let's go ahead and see what happens. Sweet, you see we're getting all of our data? That's really, really awesome. Not all of our data, but all of our items. We're one step closer to actually getting the rest of our styles in here and the functionality.

Let's end the video here, and in the next video, I'll show you how we can take this data that we're already putting in and throw it into these items. Now, what I want you to do is try and do that on your own. Try and figure it out on your own, and then I'll show you how to do it in the next video.

If you don't want to then just go on to the next video, but it's pretty self-explanatory, at this point, how you can do this. So I recommend that you try and figure it out. If you can't though that's chill. It's no big deal.

Let's commit our code. Let's say git status, git add ., and let's say git commit -m "created type to set requests and reducer to handle said type.".

Resources

• Source Code