Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Reducers" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Brian begins creating the store for the application. The store will be comprised of reducers which return a new state based on the action they receive. After creating an initial reducer, Brian separates it into one root reducer and an individual reducer for handling the setSearchTerm action.

Get Unlimited Access Now

Transcript from the "Reducers" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: So let's go and create store.jsx. I'm gonna give the caveat here that I haven't actually worked on a huge Redux project before. I've done my own personal stuff on it, so this is really poorly organized. I'm going to say everything I'm doing in terms of organization, don't do that.

[00:00:20] Unfortunately, I don't have a much better recommendation. But I'm sure you can tweet it and some angry person will tell you what to do. So create Store.jsx. I still call it JSX. You can call it ES6, as well. I've seen some people do that, because we're gonna be using ES6 but not JSX.

[00:00:37] I just call it JSX because then that reminds myself I need to transpile this. I don't really care what's in it, so whatever. Store.jsx. Here we're going to pull in Redux
>> Brian Holt: We're gonna pull in reactRedux. All reactRedux is, basically, a couple of helper functions to make Redux really easy to use with React.

[00:01:07] You can use Redux with any other library. In fact, I know it's getting some popularity in the Angular community these days, which is pretty cool. I like the cross-pollination.
>> Speaker 2: We just sent a Reactive Angular to-
>> Brian Holt: Did they use Redux?
>> Speaker 2: Yeah, they did.
>> Brian Holt: Amazing. Go watch the other course.

[00:01:25] That'll-
>> Speaker 2: He used Rx and Redux with Angular, too.
>> Brian Holt: Awesome. Here's a little of just how I do Flux/Redux. Make all of your actions constants, so that if you need to change the name of your constant later, that's okay. That you don't have to go change everything.

[00:01:52] This is gonna be the name of my action, setSearchTerm. Right now, they're called the same thing. They don't have to be called the same thing. That makes sense to me. And now we're gonna make our very first reducer. Which, again, that sounds really intimidating. One of my most biggest pet peeves with people that write libraries is they use the big computer sciency terms.

[00:02:16] Angular is the worst at it. They use like transclusion, and directives, and all the stuff that makes it feel really intimidating. In reality, they're not actually very intimidating things, but they feel very intimidating. So that's why I'm not a huge fan of reducer, or despite the fact that's actually what it is.

[00:02:34] But whatever, rant over. We're gonna do state, and we're gonna do action. You don't see a lot of switch statements in JavaScript. Just cuz they're weird and they fall through, and they're kind of just annoying to deal with. But it actually does make a lot of sense with your root reducer.

[00:03:02]
>> Speaker 3: Can you just reclarify why you're setting the const SET_SEARCH_TERM there?
>> Brian Holt: Let's get there first, and then I'll talk about it again.
>> Speaker 3: Okay.
>> Brian Holt: We're gonna do switch statement on action.type. The action's gonna come in here.
>> Brian Holt: So this is a switch statement on that. Then I'm gonna do case SET_SEARCH_TERM.

[00:03:31] So if we see a SET_SEARCH_TERM type event, type not event. They're very similar to events, but they're actually actions is what I really mean to say.
>> Brian Holt: What I'm gonna do here is I'm gonna say const newState = a new object. Because, remember, we have to return a new object every single time.

[00:03:51] I'm just gonna do this object at assign that we've seen before. Objects.assign (newState, state, set our search term, {searchTerm: action.value})
>> Brian Holt: And then return newState.
>> Brian Holt: Underneath this is gonna be another state. But we'll talk about this just, no, this would be actually the default.
>> Brian Holt: So let's talk about what's happening here.

[00:04:34] Somewhere inside of my app. Well, I guess what I should mention is, we're gonna abstract away our search. So if you go back to our app, here, this part right here where we're keeping track of the state inside of React. We also want to make this work in our home page here.

[00:04:49] So when you type in here and search for something, we want that to work too. So now both of these have to be able to modify this search term. So we're gonna abstract that way into Redux and let Redux handle all the heavy lifting here. I should mention that that's what we're doing.

[00:05:09] We're gonna have both places just emit actions of saying, hey, my search term changed. And then we're gonna let Redux handle all of the changing. Then, inside of these different components, we're just going to handle them ourselves. Whenever we see a SET_SEARCH_TERM action, what we're gonna do is we're gonna create a newState.

[00:05:30] Because, again, it must be new state. This is gonna be just this blank object. It's going to get everything that state had before, because we need to not blow away the rest of our state. Because there's going to be other things state's keeping track of. And we don't to blow that away on every single update.

[00:05:47] Does that make sense? Because it's whole tree of data. If we don't bring all the old state along with us, we're going to lose it. The last thing we're gonna do is, whatever was in state before for search term we're going to overwrite it here, with the action.value.

[00:06:03] Whatever was there, now. Absolutely key with Redux, you must return the newState. This is a pure function and it absolutely must be a pure function. When I say pure function, it's not going to modify any of the state around it. What it's going to do is it's going to take in what it got from state, it's going to apply a transformation, and return a new version of it.

[00:06:28] That's what I mean when I say pure function. So it's not going to modify any of its surrounding global environment. It's going to be input in, output out, the end. That's it. Nothing else gets modified. Make sense? Let me show you how you would violate that. You'd say let x = 5, and if I did like x++ in here, that would be a violation of this contract.

[00:06:55] And say I was using x somewhere else to do something else. This is a violation of that.
>> Speaker 4: So the object assign in this case is sort of like you're inheriting from a prototype. Except for you're not actually keeping the prototypal relationship.
>> Brian Holt: Yeah, so it's not inheritance.

[00:07:15] But this is like the functional version of inheritance. That's not even totally true. That'd be dynamic dispatch. Watch another course for that. I don't wanna talk about it. [LAUGH] But the basic idea here is keep everything from state but overwrite this part. That's the gist of it. I see where you head's at, and I think you're right, but it's a leaky abstraction.

[00:07:37] I don't wanna give everyone else the idea, either. Any questions about this? Another thing I'll say about this. This actually could be another reducer. In fact, we could even do that. Well, we'll leave it like this but you could. Here would be a good place to dispatch this to another reducer.

[00:07:59] So instead of saying this, I would say, return reduceSearch term with action.value. And that would be this route reducer dispatching to another reducer. That's kind of the idea there. Or we can just do that. Let's just do it. Whatever. #yolo.
>> Students: [LAUGH]
>> Brian Holt: [LAUGH] Okay. reduceSearchTerm.
>> Brian Holt: Actually you have to pass more than just that.

[00:08:38] You have to pass the state and the action. So I'm gonna pass state. I'm gonna pass action.
>> Brian Holt: And then I'm just gonna copy all that business of what I wrote up here.
>> Brian Holt: Since we have multiple reducers now, this is a little bit inaccurate. Let's call this rootReducer, cuz that's exactly what it is.

[00:09:13] And then now we have to pass in state and action, as well.
>> Speaker 6: Would that be reduceSearchTerm?
>> Brian Holt: It should. That was a test. You pass.
>> Students: [LAUGH]
>> Brian Holt: So any questions? This is still not totally done. But any questions about reduceSearchTerm?
>> Speaker 3: Someone's asking, object.assign is the native version of what jQuery.extend does?

[00:09:50]
>> Brian Holt: Maybe. I seem to recall [CROSSTALK] jQuery expert back there.
>> Speaker 2: Yeah, pretty much.
>> Brian Holt: Okay. I know it is the equivalent of _.assign, so if that speaks to you, it is literally the same as that. If you use a underscore or low dash.