- Read Tutorial
- Watch Guide Video
Now we are printing these all out, so it's calling it automatically, but we don't want that to happen. The reason we don't want that to happen is because when we put in the logic, it is going to switch our enrolled status and enroll us in all the courses or do exactly the opposite. Which we don't want. When the user signs in, if we were to implement a login, we wouldn't want the data to switch automatically. We would only want it to switch when they click on it.
Let's go ahead and let's fix this error and make it so we can toggle our actions or our enrolled status. so what we going to do is close the terminal, and we want to basically go to this onClick here in action it an arrow function.
Okay, sweet. Let's go ahead and go back to the application and see if we get that error when we click the button. Consule, click, no error, and yeah that fixes our problem. That's the very reason we're having that problem with it toggling automatically. So that fixes it, but I want to get rid of this and then type in the functionality so you can see why specifically this is a bad error.
Okay so feel free to just watch along at this point and leave that. You will have to write out the reducer logic with me, so just watch for now. Let's keep that, but instead of returning state let's go through and using the action.payload(the ID), we can determine which enrolled status we want to flip.
So again, let's use the map function we have before, such as in library.js, let's go into coursesReducer.js and use that. Let's do it over our current state. So what we want to do is:
Now if you go to Chrome and you Google redux state and select the first link. Then use control + f and search pure. It will discuss things you should never do inside of a reducer. So basically the idea here is we don't want to modify state and return it. We want to create a whole new thing of state and return that. We want to create new objects, not modify objects, because that can mess up things up across our reducers. We want to keep things pure as they would say in Javascript. So let's go ahead and map over this and return a new set of courses.
Now this isn't typically how I would write my reducers, but since we set it up this way we are going to continue doing this. I will explain in future videos and applications why we are doing it a certain way, and I will reference back tho this application to show you the differences, because it will be slightly different but not much. Enough that it would be good to reference back and really understand what we are doing to help you understand why we are doing it the way that we are doing it.
So let's go back to our application, because it should be operational. Ok, I said should be, not it will be. We have an error on line 16: cannot read property of course id. The reason that it is not working is because we are trying to go over our state when it doesn't even have courses yet. So let's make it an arrow function, and save it, and try it again.
It works so far. Let's click one of these buttons and see if it works. We get and error message of: cannot read property 'enrolled' of undefined. So let's go to schedule.js line 14.
Let's also check our redux dev tools. So they are all set to null now, so we did something wrong in our reducer. It is because we said to go over our objects, and do nothing with them, so technically new courses is empty. Which is not good, so what we need to do is put in return course.
Let's try adding one again, and you'll see that it works. So that is how you write that, and flip the values so that we can enroll them. You'll see that it automatically re-renders our schedule component and says that if it is enrolled let's put it on the screen, if it's not: let's not put it on the screen.
So that is pretty much all of the functionality except for the progress tracker. Obviously, we still need to style it. So let's go ahead and move onto the next video where we will implement the remove feature from our schedule. We are going to make it so that when we hover over this we can remove courses, not just on here. We want to make sure that we have that functionality in our schedule too, like our design wants us to have. Then after that we will implement for the progress tracker. So let's commit our code and do that. So git status, git add, git commit -m "added logic to toggle enrolled reducer". Ok, see you in the next video.