Intermediate React

Intermediate React Recap & Testing a Reducer


This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Recap & Testing a Reducer" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

A reducer is a pure function that takes old state, action and a payload and returns new state from that. Brian demonstrates how reducers are very testable because they are pure functions.

Get Unlimited Access Now

Transcript from the "Recap & Testing a Reducer" Lesson

>> Brian Holt: So let's hammer home a little bit like, what is a reducer? A reducer is a function that adheres to just a particular contract, right? So notice, we're just exporting a default function here, right? It's just a function. The function takes an old state, it takes in an action object and it returns new state.

[00:00:22] If you follow those things, you are a reducer. A reducer is also if you're comfortable with functional programming, it's a pure function, it has no side effects. So for example, if I had something up here that says like, let x = 1. And here I did x++ and return state + x, I know that makes zero sense but bear with me for a second.

[00:00:52] This is no longer a reducer because this is ambient state, right? And if I call this function 10 billion times, on the 10 billion and first time, what's the answer gonna be?
>> Brian Holt: It's not gonna be the same, right? So when I say it's a pure function, it means I can call it 10 billion times with the same parameters and get the same answer on the 10 billion and first time, right.

[00:01:13] So that's what a pure function is on this particular case. So all reducers must be pure functions as well. Now, what's great about being pure functions if you're familiar with testing patterns, they're super easy to test, right? Because I just have to give it some state, some action, and just make sure that, in fact, the test for this would just look like test, you don't have to copy this, but just to show you what it looks like.

[00:01:43] This will be test on the locationReducer. And I would just have to say expect(locationReducer) with a state of Seattle, WA and an action of type SET_LOCATION and payload of San Francisco, CA.
>> Brian Holt: Let's make sure we get this right, toBe San Francisco, right? That's it. That'll be the whole test, this entire thing.

[00:02:37] I read this one liner test, and I basically get to be assured forever that this works exactly the way that I want it to and I'm prevented against having regressions. Pretty cool, right? So that's another reason that reducers and read outs are cool because these tests basically read themselves.

[00:02:53] And actually, I'm gonna show you later, they've literally write themselves. We can actually have Redux to generate tests for itself which is amazing, and I'll show you that. Okay, so drop that, drop that, so that's what a reducer is, it has to be a pure function that takes an old state, and an action, and it returns some sort of state from that.

[00:03:16] Either the old state if the action type doesn't apply to it, or the payload or whatever modifications you need to do, right?
>> Brian Holt: Questions about reducers? Does that make sense?
>> Brian Holt: So we're still only halfway through this process. Like we still got more steps to do. I'll show you how the reducers get called but I need you to understand how reducers fundamentally work.