2.4 Challenge: Add a Case to a Reducer

This isn't one of the usual lessons. Instead of learning something new in this lesson, this is a challenge lesson. What that means, is I'm going to walk you through some code, and you're going to have to make a change to it, to make it work or improve in some way. There are a couple of these challenges throughout this course, and feel free to completely ignore them if you want to. You can go through all the regular lessons of this course and still get everything out of it, but if you'd like to try out some of the skills you've been learning, then these challenges are exactly the right place to do that. Alternatively, you could just watch through this whole lesson and see how I solved the challenge, if you don't want to come up with your own answer. So let's look at what this challenge is. The first challenge in this course is to add a case to our reducer. Now this reducer function is the type of thing you would use with Redux, although you'll notice we're not actually using Redux in this code. So, we have a reducer, that takes some state and an action and then it returns to new state based on that state and that action. Now, we use this a couple of times. So, you can see here, we create our initial state by just passing a previous state of undefined and an empty object as our action and that creates our initial state. As you can see, that initial state gives us state.cards equalng to undefined. And this is just a little test line. As you can see, true is being printed out in the console here. So we know that in the initial state, there's no cards in our state. Then we create some new state. We pass our existing state, and an action to a reducer. This action is a type of ad card and it has some data for that card and we state that we get returned will have that card in a card's array. And you can see that going on in our reducer, right here. We create our new card based on that data. And then we either create a new array for that card if we don't already have a cards array or we can catonate it with the existing cards array and return the new state. And so then as you can see with our state card line here, we have state.cards index of zero .front equals the card front and as you can see in our console, that returns true. So then underneath this we go for another state change. This time we use the addDeck action and we pass it some deck details. However, this line here is not being logged to CodePen's console. In fact, if I pop open the terminal you can see it's because we can't read the property 0 of undefined It means that state.decks here is undefined. So that is the problem we're gonna have to solve in this challenge. Now if you like to do this challenge, underneath this video you'll see a link to this codePen and you can go ahead and choose the fork it. I'll do that right now and now that is fork let me just rename it. And now we can go ahead and make a change here. So if you want to solve this, go ahead and pause the video right now, because I'm gonna start explaining my solution to this. Okay, here's my solution. We can take a lot of cues from the ADD_CARD case that we have here, because what we want to do, is add a new case for ADD_DECK. So, the first thing we're gonna do is set up a new deck here and we can use Object.assign to create a new object here. And we will do action.data to just copy off all those properties. And then we will just set a few custom properties. In our case, let's just do the ID, and we'll do that just like we did with the card. We can just use new_Date, and get a Unix time stamp as the ID. Okay, now we have to return our new state. Once again we we'll do object.assign, create a new state object. We will copy all the old state over but we want to replace one property and that is decks. Now our state.decks already exist and we will do state .decks.concat and we will concat our new deck onto there. Make sure to put it in it's own array otherwise we will just return our new deck in an array. And notice as we do that, you can see that we have our line here state with deck and we have true being printed over the console. So that means that we have successfully completed a challenge. Because our line here is now correctly being logged. Okay, so good job, you've done the first challenge. One thing I will mention here is you'll notice that we are not actually mutating the existing state object, but instead, creating a new state object and returning that. And that's considered a best practice a lot of the time within your React applications. This way, since we have two different objects in memory instead of mutating the same one, when react compares the two objects to see if it needs to make a change, it doesn't have to do a deep equals to look at all the properties. It can just see that we have two different objects and do a very simple equals comparison. And that way it knows a lot more quickly that it actually does need to make a change to the DOM. Okay, so that is the first challenge. Excellent work.