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

Reducer is a method that modifies and return the new state based on an action and value.

Get Unlimited Access Now

Transcript from the "Redux Reducers" Lesson

[00:00:04]
>> Steve Kinney: The next thing we're gonna look at is this idea of the reducer that was on the chart, which you'll notice is not on this list of the methods because it's a function. So, let's make a reducer together. It'll be great. We'll call, let's make a calculator. It won't calculate pizzas, it's just gonna calculate numbers.

[00:00:24] Calculator and remember it takes two arguments, it takes the action, or it takes the state of the world, rather. And then, the action that happened. A lot of times it is useful considering you wanna modify the state of the world. It is useful to start out with some kind of like, initial state of the world.

[00:00:43] So we will say const initialState, [SOUND] Is a result of zero, cool. And we'll say state, if no state is passed in, we'll use the initial state. That way we don't have to deal with trying to assign to undefined, and checking and all that stuff, we're better than that.

[00:01:02] So we will start out with this calculatorReducer. And the world's simplest reducer,
>> Steve Kinney: Would be to just ignore whatever action happened and return the state of the world. That is a very valid reducer. Takes the state of world, takes an action, doesn't do anything with it as long it returns the new state of the world.

[00:01:29] And in some cases, if this is not something you're given application cares about. It is likely that this is probably what's gonna happen in some of them. For instance, if you have a reducer that cares about showing the latest tweet, a new notification might not do anything in that reducer.

[00:01:47] So that makes sense and we can say,
>> Steve Kinney: I'm 50% chance of JS catching my changes, I notice.
>> Steve Kinney: There we go. CalculatorReducer and we can pass it or whatever and the state is going to come back out. So we just like, calculatorReducer, we take that initial state.

[00:02:15] And we will get back out that result. We don't do anything with the action just yet, but we can very well could, right? So let's say we had an action that is add. And so the two things that we'd probably need in that case is the action type, and the value that we want to add.

[00:02:33] So we'll say, addAction is going to be a type of add, these is all caps and I will have a value of four.
>> Speaker 2: Value of four.
>> Steve Kinney: Yep, thank you.
>> Steve Kinney: So as the calculatorReducer I'll take the initial state of the world. We just passed that in, nothing happens.

[00:03:08] Now, if we go in here and say, and it's very similar to the way we did it with flux yesterday. You can use a switch statement if that's how you roll. I've made it very clear that's not how I roll. So let's say the action type, it equals add.

[00:03:25] What we'll do, is we'll return a new object, right? Because we wanna be immutable here. We don't wanna change the object, and we'll see why, later. We wanna return a brand new object, so we'll take all the current stuff in the state of the world. And, we'll say that the result is the state's result.

[00:03:41] Plus whatever the value on that action is. So if we have an add action come in, we'll do that otherwise, if any other action comes in, this reduce is going to ignore it.
>> Steve Kinney: So we call it and we can see that this new,
>> Steve Kinney: State of the world comes out, which is zero plus four.

[00:04:06] Some really, really heady stuff here, great.