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

Reviews the implimentation of the actions and reducers for Jetsetter.

Get Unlimited Access Now

Transcript from the "Redux Solution Review" Lesson

[00:00:03]
>> Steve Kinney: So I don't want to discredit your hard work, but there is a branch called Reduct Space where I did it already and it's here for you. So let's take a look to look at all of the different parts implemented. Because I'm pretty sure watching me write a bunch of functions that return objects would be very amusing to watch the typos, but probably not the best use of your time.

[00:00:24] So we have filter actions, will take texts and will use this update 'unpack items filter constant, which is again that string. And I think I mentioned this earlier, but I think I'll mention it again. A big reason why you might consider using constance is, two reasons. One is if you make a typo, it will blow up, because that will not be a variable name that exists.

[00:00:49] And, two is that you get auto complete, which almost eliminates the possibility fo number one happening, right? It likely you will autocomplete these so that you won't make typos so that things won't blow up. Because otherwise, what happens if you make a typo in the string, when you run through those conditionals in the reducer, just none of them will hit.

[00:01:09] And you will lose probably 15 to 20 minutes of your life trying to figure out exactly why that is. So we have this update unpacked items filter, which is just going to update this text. We'll see like what exactly happens when we get to the reducer. We have update packed items filter.

[00:01:29] Those are the two filter boxes on the screen. For the items we have that original add new item that I wrote earlier. As well as a title item that will take an id remove item mark all as packed. Doesn't need any additional information because it's doing it to all of the items.

[00:01:48] Finally the new item actions which is just that input field. Which will basically keep track of the value that's changing in that input field so we can change it in this state. A thing I'd like to bring your attention to is I chose to keep the input field in the redux store.

[00:02:08] Mostly to show you what's gonna be involved in this. There's definitely a question that you should ask yourself when we talked about this in the very beginning of the course of this ephemeral state versus more permanent long-lasting model state. Do I need to keep this in sync myself?

[00:02:24] Do I want to serialize what's currently in the input field? It depends on your application. Right, and there will be some trade-offs that we're gonna discuss in a second. So, do not take the fact that I did it right here as a, you must always do everything. I think it's very easy when you first start with redox that, everything should go in the redox store.

[00:02:41] Right, and maybe some things should and some things shouldn't. But unfortunately, that's on you to kind of make the decision about based on some of the trade-offs that we'll look at in a second. So going back to the reducers, the index reducer is simply using combined reducers. I think that was already in there for you.

[00:03:02] The filter reducer is basically taking, looking for the update unpacked items filter and the packed items filter input fields and it's basically changing that text. This is an object with effectively two properties. Packed items filter, unpacked items filter, and all that it's doing is changing the text on the respective property.

[00:03:23] The items we do here is doing a lot though we do in flux earlier or by hand, it's at the state where we're just changing an array. So the state, and you'll notice that this is just the state of items in this case. So we have the state of the items.

[00:03:37] We can filter through them. We're gonna map through them to swap them out. This is the stuff we've done a few times in this application. So I don't wanna belabor it and then finally the new item reducer is just changing that value. That's eventually going to get path to the UI.

[00:03:52] None of that is happening yet cuz we have not written that code. We have effectively only talked about Redux so far in isolation. These tests were technically written in the same folder directory that also houses a React app, cuz that is the station that this train is about to arrive in.

[00:04:07] But we haven't actually gotten there yet. So this is all just Redux and again, I can't stress this enough, objects going into functions making new objects. Very, I think one of my favorite parts about Redox is, while breaking stuff out can sometimes get a little tedious to make actions, and action creators, and reducers, there is a certain value in the simplicity.

[00:04:28] It is very easy to figure out what's going on. All right, very cool,
>> Steve Kinney: So you might really like this reducer pattern, right? It's a little bit different. We were looking at action types with Flux earlier, but we weren't necessarily like Reducing and changing the state and replacing it.

[00:04:50] You might, I use Flux at work and I very much prefer this reducer pattern! Can I use it? And the answer is yes, right? Cuz again, a lot of this stuff is objects and functions but, even better than that, that flux library that we saw earlier in the utils folder has this thing called a reduce store.

[00:05:07] And it effectively lets you do a redux reducer in a normal flux implementation. So you can that item store in this case is going to inherit from this reduce store. And the constructor, we're just going to pass the dispatcher. All right, in Redux we don't have a dispatcher, in Flux we do.

[00:05:23] We're gonna pass that dispatcher to the super class. And then we'll give it a reduce method that is very similar to Redux's, right? It takes the current state of the world and the action, and returns a new state of the world. Right, cuz these are all very much just Objects and functions we can implement this as well.

[00:05:44] So if you prefer this but you use a flux app in your daily life you can still use this pattern it is available to you.