So this is going to require us to do is write a new action and a new reducer. Hopefully, we will get that all done in this video and get it displaying these in our schedule. Now the really awesome thing about redux is once we implement the action in the reducer, we don't have to change anything else. We don't have to change this. It's going to automatically display the classes we're enrolled in our schedule.

So let's close some of these tabs, so we are left with index.js. Since this is such a long payload what I'm going to do is just write the function up here so that we can see both of our functions easily so that we don't have to scroll down to see the second one. In normal cases, I would write it in descending order so ascending to descending I would write my functions up top and then go down as I write more.

Since this function is so dang long, I'm going to write it up top so that we can see both. So let's say:

index.js

import { 
    Fetch_Course
     } from './types';

export function toggleEnrolled() {
    return {
        type: ,
        payload:
    }
}

The payload will be given to us through this function. Let's create a type so that we can do this, so I'm going to put this on a new line. I'm going into my types, by command-clicking on types. In VScode you hold command and then click types and it will bring you into the file. Then let's say:

types.js

export const TOGGLE_ENROLLED = 'TOGGLE_ENROLLED';

Now we could say add class or remove class, but the thing that's good about the way that we're writing this is that it will work for both cases. So we will just call the same action when we click. So let's get out of types and import TOGGLE_ENROLLED into index.js. We'll put the type as TOGGLE_ENROLLED so that we can tell our reducer what action to do, and we want to pass in id as a payload.

This is where ID's come in handy. Because when we have an ID we can just map over it. So let's make that refactor as quick as possible. So let's provide each of these with an ID over the top, and let's copy it so that we can assign each with an ID.

Now we have ten objects here, but since we started at 0 it looks like we have nine. Cool, we have ID's on this, so we can just pass an ID into this and enroll it that way. Before we can do anything with this, let's talk about the logic of this, we want to know what we are doing with this action. Right now all we wrote was a function that allow us to have a type so that when we go to our reducers we can do something with it. So let's go ahead and write the case for the reducer but not write any of the logic. So let's go into our coursesReducer.js. Let's put another case in here. Let's say case TOGGLE_ENROLLED, you'll see that it says auto-import if you are using VScode. Import that at the top of our file on line 1.

So what we want to do is get our reducer set up:

coursesReducer

case TOGGLE_ENROLLED:
    console.log(action.payload)
    return state
default:
    return state;

So when we go to our actions and we toggle enrolled. We call this function. We are going to pass in this ID. We have access to our course within each one of the objects. Which means that we can click this button, pass in the ID, then redux does its magic and it dispatches this to our reducers, which then goes to the actions and attached payload to toggle our enrolled status. So lets go ahead and call this function within our libraryCourse component, and connect this up to redux. First, let's import connect and toggleEnrolled at the top.

Let's finish copying this over, and get this connect now.

So that's looking good. Let's make it so when we click on our button in our action here, we get access to that method, and we can change the data. So really simple, we're going to have to do some code writing in our action.js. So let's provide an onClick prop in our action:

libraryCourse.js

<Action onClick={this.props.toggleEnrolled} className="library-course__action"/>

Now let's go into action.js and lets access this props onClick on this div. What we want to do is change this div to a button and then let's say:

action.js

<button onClick={() => this.props.onClick()} className={`${this.props.className} action`}>

So that should work. Let's reload the page. Looks like we have an error: toggleEnrolled is not a function. Ok, so that is a different error, so it is working. So let's import * as actions and let's get rid of our collection down here and just say actions.

libraryCourse.js

import * as actions from '../../actions';

and

libraryCourse.js

export default connect(null, actions)(LibraryCourse);

That seems to work now. So go back to the app in the browser, wait for it to reload, and minimize the console. You'll see that since we changed it from a div to a button it looks a little different. Let's just open one of these and see what happens. Ok, it says undefined, and that is because we are trying to print out the ID in our coursesReducer, in our action.payload.

If you remember in our index.js in actions, in our toggleEnrolled we are trying to take our ID and pass it as a payload. Since we are not providing that when we are trying to console.log the action.payload in coursesReducer it is printing out as undefined because it is undefined.

So what we need to do is go into libraryCourse and pass in the ID. So let's try that here:

So let's try saving that. If we get an error, we will turn it to an arrow function. Seems to work. The only problem is that it calls it immediately, which means that once we get the codes in there to switch the values when we boot up our application its going to switch these values automatically.

The only steps we need to do now to finish this piece of functionality off is switch the values and make this an arrow function. So to make sure you understand what I mean here, let's commit our code, and focus on that in the next guide. So let's commit our code: git status, git add, git commit -m "created toggleCourse action creator and reducer and connected libraryCourse component to redux to call that within action.js". So let's move onto the next video where we will complete this feature.

Resources

Source Code