This course has been updated! We now recommend you take the React Performance course.

Check out a free preview of the full State Management in Pure React, v2 course:
The "Undo Reducer" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to implement the undo reducer to be able to submit and submit new states.

Get Unlimited Access Now

Transcript from the "Undo Reducer" Lesson

>> So what do we need to do? We need to figure out like, all right, we need to dispatch and undo. And we need to figure out if there is a past, right? So we can get that from the API. And we can make this as own smaller component as well.

[00:00:12] Like we could do lots of things. Let's just do the simplest thing from the API, from the context. So pull an undo and his past. And so here we'll say disabled will be there's not a past article, click B undo. And this is again one of the reasons I really like kind of breaking this out into the context and having the reducer pattern which is it's not like a whole bunch of squarely state.

[00:00:53] I'm just saying, is there a past and here's how you undo and that's defined its own kind of super testable state management piece. UseContext is not defined, let's pull that in. All right, so let's see, let's just log in to the page real quick, undo and isPassed Cool, undo the function is passed is false, this should be disabled, maybe it is.

[00:01:33] Yeah, it's just my assistance wall, wonky and so we'll say undo so let's add a thing. All right, doesn't work let's see what we got in here. You know why doesn't work?
>> Didn't add an implementation-
>> We haven't done a dispatch-
>> [LAUGH]
>> You just wanted to show us that-

>> I just wanted to show you that we could wire it up. I got really excited to show, watch it undo, but we didn't write the undo logic. So I'll just add a quick console.logic here, just to make sure, we'll do it in the reducer. So, yeah. If you fire actions and there's nothing listening for it in the reducer, nothing happens, right?

[00:02:17] And then I proceeded to do that, which was really A+ work, right? Action_type is 'UNDO'. Let's start by console logging. Cool, it looks like I was starting to type down there. Let's go ahead and just undo that, Undo. Now we need a past state. All right, we're gonna undo.

[00:02:52] All right, so what does it mean to undo,right? Really all that it means is to take the most recent past and make it the present. And to take the present and make it the future, right? So we can do that fairly easily. Famous last words. So the new present in this case is going to be the very first thing on the array of past states.

[00:03:25] And we use the spread operator to capture everything. We'll grab those from the past. And then we can return, so we got the new present. And I'm sorry, this is the past. I got carried away. And then we'll simply return, the past is now everything but the first thing in that array, right?

[00:04:01] Just the new past, and we'll say that the present, it's the new present. And the future, Is whatever the current present is and then all future states. Cool. What's up?
>> Do we spread state.present?
>> Nope. Talking and typing is fun. So we hit forgiven, we hit undo, it's unforgiven.

[00:04:45] All right, if we say hello world, we submit it, we undo, it's un-submitted, right? And so we can now implement undo pretty easily by simply shuffling the states around, right? And ideally this pattern works everywhere. It's really hard. Is it doable with your state? I'm sure if you put your mind to it you could do it, right?

[00:05:08] But the interesting part here is it's not an extra React API. This is simply a JavaScript data structure. Right, and it's simply you have an object with two arrays and a target state, could you do it with indices? You probably could do that as well, right? It's all however you wanna do it.

[00:05:24] Maybe the nature of your problem is gonna be slightly different, but it is all just simply a JavaScript data structure that we have full control of in user which lets us do something a little bit more complicated. Okay, I'm gonna push up this branch and you are gonna implement redo.