So right now we're just logging to the console, but what we want to do is actually dispatch an action and then have it go to our reducers, and then we'll create a reducer which will handle our requests, and specifically in this video, the action we're going to handle is changing the selected box.

So let's get rid of this console log in requestsBox.js and let's add in an arrow function.

requestsBox.js

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        return (
            <a onClick={(title) => this.props.changeSelectedRequestType(title)} className='requests-box requests-box-inactive'>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </a>
        )
    }
}

What we're going to do now is actually build this or we're going to crash, because if we run this right now it's not going to work. So we need to build this. Let's go into our actions folder and let's create a new file and call it requests.js and in it, we want to import a type, which we haven't created yet, from type.

This type is going to be called what we call our function.

actions/requests.js

import { CHANGE_SELECTED_REQUEST_TYPE } from './types';

Now we're going to have to go make this in our types directory, so go to types.js and add that in.

All right. Once you get that typed in, let's write out the function that dispatches this to our reducers. It'll be very similar to our other actions. It's going to be really tiny.

actions/requests.js

import { CHANGE_SELECTED_REQUEST_TYPE } from './types';

export function changeSelectedRequestType(boxType) {
    return (
       {
         type: CHANGE_SELECTED_REQUEST_TYPE,
         payload: boxType
       }
    )
};

Now let's make sure we are getting this into our actions/index.js file, because right now it's in requests but redux doesn't know what this file is. So we've got to import it.

All right. So what we've done now is we've provided an action creator called CHANGE_SELECTED_REQUEST_TYPE. The purpose of doing this is so we can catch this type or this action that we've created after calling this function introducers and then perform some logic to modify our entire application state or to modify something in our entire application state.

So to do that we first have to write out a reducers so we can do that. Let's open our reducers directory and let's make a new file and let's call it requestsReducer.js. Now what I want to do is make this a little quicker and copy everything in authReducer and throw it into requestsReducer.

requestsReducer.js

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

const INITIAL_STATE = {
    authenticated: false,
    user: []
}

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case AUTHENTICATE_USER:
            const { user } = action.payload;
            return {
                ...state,
                authenticated: true,
                user
            }
        default: return state;
    }
}

Theoretically we could put them all into one file. We could combine all newsletter and requests and then just have cases. We could do that but it'd get it really confusing, and if you remember we want to have our redux dev tools really clean so we know what's going on.

So it's really logical and understandable thing once you get the logic behind it. It personally took me a hot minute to get redux, it took me a good while to truly understand it and I actually learned it in Angular. It will get better.

Right now in a request to reduce or we have all this authenticate user junk that we want to change, but just to show you what happens if we leave it in here, let's go to reducers/index.js and hook it up.

Now since our initial state is the same in requestsReducer as it is in our authReducer, we're going to get the same sort of data twice. So let's go into our application and look at the redux dev tools and see what that looks like.

You'll see that we have our requestsReducer, which looks great, but right now we have two sets of the same data, authenticated and user. So let's get rid of the data that has nothing to do with requests. What we want to see in here is requests.

So let's go in here and fix it.

requestsReducer.js

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

const INITIAL_STATE = {
    requests: [],
    selectedRequests: 'pending'
}

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

So by default we're setting the initial state of the requestReducer to be pending, because we want that to be the first thing selected whenever someone opens the application, because that's good for the user experience.

Now if we go into our into our Google Chrome you'll see that in redux dev tools, our requests are empty, but the default is pending.

So when we perform this request, when we click it and it goes through our actions and then to the reducers and changes this, it's going to leave everything the same except for it's going to overwrite selected requests with box type.

So let's go ahead and try it in the next video. We have all of that in, but there's always a chance that it doesn't work, but it most likely does.

So let's commit and try it in the next video.

git status
git add .
git commit -m "built requests reducer and change selected request type action creator"

I'll see in the next video, where we'll test it out.

Resources

Code at this stage