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

Brian imports the action into the reducer. When the reducer is passed a specific action type, it will call the appropriate method to return a new state. Once the reducer is updated, Brian spends a few minutes reviewing the code and explaining his use of Object.assign().

Get Unlimited Access Now

Transcript from the "Using Actions in a Reducer" Lesson

[00:00:00]
>> Brian: So this is a bare bones action. Bare bones action creator. Now we have to go make reducers know what to do with the SET_SEARCH_TERM action. Let's go back to reducers.js, okay. We're gonna need an import here at the top. Import { SET_SEARCH_TERM }
>> Brian: From ./actions, okay.

[00:00:29] Now we need a case, sense search term, colon, return.
>> Brian: Let's see,
>> Brian: Yeah, setSearchTerm, which is a reducer that we're about to create, with state and action. So this is what I was talking about when we're dispatching to another Reducer, right? So setSearchTerm is gonna be the exact same contract as rootReducer, but it's only going to handle this particular type of action.

[00:01:12] So we're gonna pass this same state that we got up here from rootReducer, and the same action. And then we're going to let it, it being setSearchTerm, handle the reduction, right? And then it's going to return the result of that, which is going to be the new state, which is going to be the state that we end up with.

[00:01:28]
>> Speaker 2: You just flip back to actions just for a quick second?
>> Brian: Actions?
>> Speaker 2: Yeah.
>> Brian: Yeah it's literally just that.
>> Brian: Okay, back to Reducers. Now we need to go create this method right here.
>> Brian: So we're going to create another function called, const setSearchTerm,
>> Brian: = (state, action)

[00:02:03]
>> Brian: Okay, const newState equals empty objects.
>> Brian: We're gonna do Object.assign newState, state
>> Brian: searchTerm:action.searchTerm. return newState.
>> Brian: You'll find many reducers end up looking very very similar to this.
>> Speaker 2: Just a question, why did you create the intermediate variable?
>> Brian: The new state?
>> Speaker 2: Mm-hm.
>> Brian: Because of the, how object assign works.

[00:02:52] Object assign modifies the first one.
>> Speaker 2: Yeah, but why did you create the intermediate variable, constant?
>> Brian: So why don't I just modify state and return state?
>> Speaker 2: No, why don't you just put the empty object in new state and return from object?
>> Brian: Why don't I put searchTerm in here?

[00:03:12] Okay, so, are you saying why don't I put searchTerm here?
>> Speaker 2: No.
>> Brian: Okay.
>> Speaker 2: No, why do you need the constant called newState. You can return directly from object.
>> Speaker 3: I think he's saying if you replace on line 9 newState with the empty braces and then return from there.

[00:03:36]
>> Speaker 2: Yeah, and then change newState in that same line, line nine. Return newState, wait, excuse me, replace that with an empty object.
>> Brian: What is a return of Object and assign, that's my question. It might work.
>> Brian: What is this?
>> Speaker 3: We thought it was a [INAUDIBLE].
>> Speaker 2: Century Link.

[00:04:02]
>> [INAUDIBLE]
>> Speaker 2: No, I think you got someone else's.
>> Speaker 3: No, no, it's. Yeah, it's just been default [CROSSTALK].
>> Speaker 2: Yeah.
>> Brian: Yeah, that's cool.
>> Speaker 3: Time to buy the domain Object.assign.
>> Brian: Right?
>> Speaker 2: Man. Seriously.
>> Speaker 3: Someone get on that.
>> Speaker 2: So anyway, it's supposed to return whatever the target was you sent in after the.

[00:04:23]
>> Brian: Okay, fair enough.
>> Speaker 3: Just point it the [INAUDIBLE] docs.
>> Speaker 2: Anyway, I thought you may have a research on that, if it's just, cuz that's your style on that kind of thing.
>> Brian: That's very cool. That's my style. [CROSSTALK] I'm sorry to- No problem.
>> Speaker 2: Have caused trouble.

[00:04:42]
>> Brian: Only that way, cuz that's the way it is my notes. So anyway, this is a very common way of doing a Reducer. We take newState, which is gonna be a brand new object. And we're gonna assign everything that state had previously cuz we don't wanna override other things.

[00:05:04] Cuz there might be tons of other state in here. We don't wanna blow away everyone else's state. We just wanna modify our little piece of it, and then return the new object, right. And then this part, the only thing that we wanna overwrite inside of state is the search term, so that's why you had that last one.

[00:05:22] So if you're not familiar with how object to assign works, It's basically going to take everything in the first subject, right, so that just already exists. It's going to take everything that's inside of this second object. So, if this had searchTerm and a bunch of other particular state, it's going to merge all that into newState, right?

[00:05:40] And then it's going to take everything in this object, and merge that into this, right?
>> Brian: So if newState and state both have SearchTerms in them, the one that's going to quote on quote survive is going to be this one, right? Cuz that's the one the furthest to the right.

[00:05:58]
>> Brian: Does that make sense? Object at a sign, I believe is in, is it ES6? I think it is an ES6, I guess I have the docs up don't it?
>> Speaker 2: Sorry, the object of sine, I believe is eight? 2015?
>> Brian: Yes, yeah it came with ES6, so it is a new spec.

[00:06:16]
>> Speaker 2: Question, or request I'm a little lost with the flow of files that we've created for the reducer, can you summarize?
>> Brian: The flow files? Just like the flow of how-
>> Speaker 2: I think just the process of creating them all.
>> Brian: Sure. I haven't fully closed the loop yet, so if it's still not exactly apparent, the loop has not yet been closed.

[00:06:45] So I guess let's finish let's close the loop and then we'll walk through literally line by line of the code and figure our how everything moves. And then after that we'll take out lunch break. Okay, so.
>> Brian: Yeah, let's focus here just a second on the reducer just a little bit more.

[00:07:14] So again, this doesn't modify any external state, right? So, one of the big keys to reducers is that they don't, they reliably, given the same state and given the same action, it performs the same operation 100 times out of 100. So it needs to be stateless in that sense.

[00:07:32] It needs to be pure, it needs to have no side effects. However you want to refer to that, that's what a reducer must be. Furthermore, it's imperative that you don't actually just modify state and return state. The way that Redux tells that if it has a modification is, it does a shallow comparison on state versus the old state, right?

[00:07:56] So if I return the same state, it's gonna say, okay, you returned the same state, I'm not gonna notify my subscribers that anything changed. So in other words, React will never know. The only way that Redux informs React that something changed is if it gets a new state, a different object.

[00:08:12] So in this particular case newState. Does that follow? Does that make sense? So you must return a new object and you must not modify the old object. It makes sense? So, that's the anatomy of a reducer. Some of them can get a little bit more complex than that, but for the most part reducers themselves are not terribly complicated.

[00:08:37]
>> Speaker 2: A question, can you use the spread operator instead of a sign?
>> Brian: If you have object spread, or the object spread operator. So Object Spread Operator is a part of VS 2017. Object Spread Operator. Yeah, Redux actually has part of that. Spread syntax, I always trust MDN.

[00:09:14]
>> Brian: Okay, that's fine, where is it?
>> Brian: Anyway, it's not in ES 2015. It's not in ES6, so that's why I don't default to using it.
>> Brian: But yes, if that is available to you and you feel comfortable using it by all means, it's simpler. Or it's just less characters, I don't wanna assert it's simpler.

[00:09:45]
>> Brian: Any questions about Reducers, specifically
>> Brian: Does that make sense what a Reducer is, like what it does, like it's compact, there is not much there but it is, there is a lot to unpack there mentally what's going on.