Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Redux Solution: Dev Tools Demo and Review" 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:

Steve reviews the solution in Dev Tools and then walks through the code.

Get Unlimited Access Now

Transcript from the "Redux Solution: Dev Tools Demo and Review" Lesson

[00:00:02]
>> Steve Kinney: All right, very cool. So this is a version wired up with React, obviously React, also Redux, React and Redux together. And so, this is the Redux DevTools. And I wanna point something out, as we look at the code, as I can start manipulating this application. I can mark something off, and you can see that every event is getting logged.

[00:00:26] So I can toggle one, I can remove, I can untoggle another one, Mark All as Unpacked. And one thing you'll notice as I check out the tools is I can jump back through the state of the application. And play through the events that happened, of course, through my application.

[00:00:45] And that's because we have this idea of an immutable state trade, which is a series of events occurred, right? This is one of the boons of functional programming, the tree went in, the action went in, a new one came out. But we can keep track of the old ones, and we can move back and forth.

[00:01:02] So let's review the implementation in Redux, but then let's add something really cool. Let's go ahead and add an undo and a redo button to our application. Let's actually implement this time traveling feature in our application for our users to use as well. So they remove one, after you remove an item, that's it, game over.

[00:01:24] It's gone until you refresh the page and just reload that array. But, [LAUGH] as we start using a local storage, or something along those lines. We might want the ability to add it back in. So we're gonna implement undo and redo, to kinda get this feature in there.

[00:01:41] And we'll kind of touch upon some of the Redux implementations that we just did in the last exercise along the way. All right, so I'm gonna flip over here. So I'm on this branch called Redux, which is just, you are in Redux Base, which had the actions and reducers, and this has our things kinda wired up.

[00:01:57] And so let's take a look at those, and then we're gonna have to modify them in order to support undo and redo. Cuz we're gonna have to change the way we think about managing the state in our application. Cuz right now we replace the tree with the new one, but ideally, if we wanted to bring back an old one, we're gonna have to store it.

[00:02:13] So we have to make some changes and touch a bunch of pieces of the code base. But let's take a quick look at what we have to start out with. So we have the PackedItemsContainer, which is grabbing the toggleItem and removeItem actions. And then it is going ahead, and just taking all of the items off of state, as well as the filter text.

[00:02:38] And it's filtering through all of them, it's getting the filter.packedItems, and that's how it's figuring out. Go find all of the ones that are packed and also see if it includes the filter text. So I actually have the filter wired up. You might only have the item.packed. And that's so you can just see the packed items.

[00:02:54] But this also includes the ability to have the filter in there. And then I have the ability to check off and remove, which were from those presentational components, that's why I named them that. The filter container is simply grabbing that filter.unpackedItemsFilter or packedItems for the other one. And it's dispatching an update UnpackedItemsFilter with the value that's now in the input field whenever it changes.

[00:03:20] The newItemContainer, again, this is what we talked about before, right? For updating the state of that input field, did I need to send it to Redux all the time? Well it depends, if it is truly an ephemeral state that you don't care about, no. I'm not gonna implement undo on typing in the input field, the operating system has that under control.

[00:03:41] But if I wanted to do some of this more advanced stuff, one you can do stuff like this in regular Redux as well. But If I wanted to implement this why I have a lot of this logic, it might make sense. Again, it's about this trade off. So it's in direction, buy you additional functionality, or just consistency, go for it.

[00:03:59] But I'm not gonna tell you that there is a, always do this, never do this rule, in this case. So I get the updateNewItemValue. I will get the addNewItem for when they hit the Submit button, and I use the bindActionCreators here. So just send both the, onSubmit or the addNewItem when it's submitted, and then the updated item value and the input field changes.

[00:04:20] Very cool, but again, our mission right now is we wanna implement undo and redo in this application.