Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Redux Solution: Undo and Redo Reducers" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Implimented the undo and redo reducers in the Jetsetter application.Finishing the solution, Steve impliments the undo and redo reducers in the Jetsetter application.

Get Unlimited Access Now

Transcript from the "Redux Solution: Undo and Redo Reducers" Lesson

[00:00:03]
>> Steve Kinney: I can click these and you can see the actions are being fired. it doesn't do anything yet because I haven't wired these into a reducer at all. So I'm gonna need to do that. These are firing actions that go into the ether cuz no reducer cares about them.

[00:00:18] So we put it on the page, we have it, we know that it's firing actions. What we wanna do is we need to, this is still broken, if I hit any of these, it's very angry at me. We're gonna need to do a few things. We're gonna need to always use the present as our item, so we need to fix those.

[00:00:33] And then also, what's the other thing that we need to do in order to be able to undo? We can change the present, but we also have to remember the past, right? So we're gonna take the past and we're gonna put it on the array of all of the past states.

[00:00:46] So let's begin to implement that. So I'm gonna go to the items reducer. I'm just gonna head start here. And I know that it's now, we'll go through,
>> Steve Kinney: And I need to think about this. I'm going to return.
>> Steve Kinney: Let's pull these and let's say,
>> Steve Kinney: Past, present, future equals the state.

[00:01:20] And what we'll do here is,
>> Steve Kinney: Return whatever the current past was, the present, the future. And I'm gonna copy this real quick. And,
>> Steve Kinney: So this will be the state.present plus the new item, right? And we'll put that in the present. And then the past is going to be,

[00:01:58]
>> Steve Kinney: State.past. Actually, I wanna put the present in the beginning, and you'll see why in a second. What's that?
>> Steve Kinney: So this will be the current present, which is now the soon to be past, and then we're gonna overwrite [LAUGH] the present. If you've watched Back to the Future lately, that's fairly helpful for understanding any of this.

[00:02:24] All right, very cool, so past, present, and future, we'll update those. Let's keep going along, so I'm putting the present at the front, and I'm just gonna use that cuz for a little help later. Action type, remove item. Again, we need to do a little bit of,
>> Steve Kinney: We'll bring this in and we'll return.

[00:02:49]
>> Steve Kinney: Present is gonna be present.filter
>> Steve Kinney: Cool, so we'll filter all those.
>> Steve Kinney: State.present, yeah, we need this present right here as well. And then the past, again,this is gonna be the same thing that we had here. Just take the current state of the world and put it in the past.

[00:03:21] All right, we keep going here,
>> Steve Kinney: And we'll grab this, [SOUND], a little too.
>> Steve Kinney: We'll say present,
>> Steve Kinney: Get rid of the semicolon.
>> Steve Kinney: We'll append it to the stack there. All right, almost there. We gotta mark it as unpacked and then we're done.
>> Steve Kinney: Put that on, and then we'll grab this, turn it into the present again.

[00:04:10] And then we are going to do the thing I'm most nervous for, which is check the code and make sure that I didn't break anything. Cuz in a perfect word, we're going to append stuff into the past, but we still haven't implemented it yet. But ideally, my app should work and not break, in a perfect world.

[00:04:26] All right, you see toggle item, you can now see that the old item is, we have it there in the past.
>> Steve Kinney: Present, all right, very cool. All right, so now we wanna implement the undo and the redo. So we're gonna have two situations that could happen if the action type,

[00:04:55]
>> Steve Kinney: Is undo action item.
>> Steve Kinney: It's a constant cuz I have it assigned. Yep, I could use the string too.
>> Steve Kinney: And Visual Studio Code is now nice enough apparently to automatically import stuff for me. I don't know if that's a plug-in or what, I will check my plug-ins later to find out how I've enabled that amazing feature and share that in a little bit.

[00:05:23] Cool, so we wanna undo. There's a chance that the past could be empty, right? If we just start out the app, we don't wanna grab the first thing out of the array cuz that's gonna be undefined, everything's gonna end poorly. So we'll say if there's nothing in the past, like literally, just don't do anything.

[00:05:42] But if there is, we'll say the new future is going to be,
>> Steve Kinney: What's currently the present,
>> Steve Kinney: Plus whatever is already in the future, yeah.
>> Steve Kinney: I'm inside other conditional I think.
>> Steve Kinney: I'm getting better about reading the warning.
>> Steve Kinney: Cool, so we got the newFuture, and then we'll say, the newPresent.

[00:06:20] And this syntax is pulling stuff off of the array that's gonna be the currentPast. So if you haven't seen the syntax before, this is gonna pull the first item off the array and call it the newPresent, and call everything else on the array newPast. And that's why I put it on the front, there's no great syntax for pulling the last thing off the array.

[00:06:39] So I’m putting it on the front of each array, so I can just pull out the first thing on the array and then I have everything else. Cool, so then we'll simply return past is the newPast.
>> Steve Kinney: The present, it the newPresent. And the future is the newFuture.

[00:07:05] Naming things is hard, if you have better names, I would say go for that.
>> Steve Kinney: Cool, I'm gonna just basically do a few little changes here. I'm gonna say there's no future, we're not doing any redo. And then we're gonna change this a little bit, which is, let's grab, let's move this up, and we're grabbing the present off of the future now.

[00:07:27] Anyone confused about time travel right now?
>> Steve Kinney: Near future. I'm basically shuffling everything across these stacks, is effectively what's happening. It's just, yeah, and we'll say the,
>> Steve Kinney: Will be the present plus what was ever on the past.
>> Steve Kinney: All right, I'm excited. I'm not confident, but I'm excited.

[00:07:56] Cuz there was a whole a lot of [LAUGH] intricate code there. So we'll say I've packed pants, undo. It's back. Undo, undo, undo, redo, redo.
>> Steve Kinney: Right, we wanna undo it, we wanna redo it. We wanna undo it, we wanna redo it. We wanna undo it, we wanna redo it.

[00:08:22] So now, it's really awesome when we have this stature, we can kind of manage this stuff with our state. We can implement features that I think would have been a really complicated if we we're just like manipulating background models, right? But we store each frame of the state of the world and we've effectively implemented time travel in our application.

[00:08:39] Literally, with past, present and future. We've implemented time travel in our application, and have a really great way to add new features. While it was definitely some extra steps I had to put in place, I did implement this feature pretty quickly on the grand scheme of things, right?

[00:08:55] And there's different options that you can do it, different ways that you can do it cuz, again, that's the great part about having objects, right, that you're moving around and functions, is that you can implement these things and it's very granular, how you go about doing it. This is something, just FYI, I would definitely reduce or test to your friends here, right?

[00:09:14] I was not confident as I was writing that code, right? So if I was doing it in more than 10, 15 minutes, I'd probably write some unit tests and make sure that the state of the word is what I expected each time. Rather than hoping for the best when I flipped over in front of 20 people in the room and 130 people online right now.

[00:09:30] But yeah, so we've implemented undo and redo.