Intermediate React Adding More Reducers

[00:00:00]
>> Brian Holt: So here we have this combine reducers, and this function that combine reducers makes is passed into here, into the reducer here. So, a brief aside here, the only thing that's actually really required in a reducer is that the action is an object and it has a type.

[00:00:25] That's the bare minimum requirements of what an action must look like. We're going one step above this by adhering to something called Flux Standard Actions.
>> Brian Holt: And this is just something that I do because I don't have a reason not to, [LAUGH] not because there's any particular good reason to do it.

[00:00:48] So Flux Standard Action, this was invented by Andrew Clark who invented Redux itself along with Dan Abermoth. And it's basically just a shape to these objects that has a type and a payload. In fact it really only has to have a type. It can have a payload, it can have an error, and it can have a meta property.

[00:01:10] Now, why do we adhere to these Flux Standard Actions? Why don't we just make up our own action shapes? There is some tools that you can use that are built on top of Flux Standard Actions, and if you adhere to these different rules then you get some additional tooling benefits behind the scene.

[00:01:26] I've never used the tools so I really couldn't explain much more than that, but that's what we're doing. If you're more interested, just check out Flux Standard Action.
>> Brian Holt: And we'll talk about the difference between Redux and Flux at the end.
>> Brian Holt: Okay.
>> Brian Holt: So let's actually just go through and finish out our reducers here since none of them have to be particularly difficult.

[00:02:04] So we have this location reducer, I'm gonna make another one called the animal reducer. So animal.js, and I'm literally just gonna copy and paste what was in the location reducer and just rename all the correct things. animalReducer, the initial state will be empty, right, cuz that's the initial state that we have for animals, but it could be dog, if you wanted to have dog be the default thing that you search for.

[00:02:29] And this will be SET_ANIMAL.
>> Brian Holt: That's it.
>> Brian Holt: Now, someone might say, well, this looks really similar to the other one. Couldn't we have some sort of higher order reducer generator? You could, but the word higher order reducer generator, that's a bunch of words slammed together that just gives me a little bit of pause.

[00:02:51] I like the explicitness of this, right? Cuz later I might come in here and SET_ANIMAL might need to do more things.
>> Brian Holt: So, this is good. This is what animal.js should look like. We're going to make another one called breed.js.
>> Brian Holt: And this is one that we're going to the breed reducer.

[00:03:18] Again, you can have here Havanese or Poodle or something like that.
>> Brian Holt: So I wanna put above here, if (action.type === "SET_BREED").
>> Brian Holt: Then return action.payload. And then here, I'm gonna change this to be else if it's SET_ANIMAL, then we're going to return empty string right? Because if we are changing the animal, then the breech is reset back to empty string.

[00:04:02] So this is how one reducer can respond to multiple different action types.
>> Brian Holt: Okay, one more.
>> Brian Holt: breeds, with an s, .js.
>> Brian Holt: We wanna have a breedsReducer.
>> Brian Holt: And this is gonna be SET_BREEDS. And instead of making that empty string, it'll be an empty array, and that's it for that.

[00:04:49] This is when someone request a new list of BREEDS, we're gonna keep that Redux store as well.
>> Brian Holt: Okay, so that gets all of our reducers for our project out of the way. So go back to your index.js and we're just going to import all of these so we're gonna have animal.

[00:05:11]
>> Brian Holt: And breed and breeds. Okay, and we're gonna have to import all of those as well, import animal from "./animal", import breed from "./breed" and import breeds from "./breeds".
>> Brian Holt: Yeah, question.
>> Speaker 2: Why isn't breed part of the animal reducer?
>> Brian Holt: Why isn't breed part of the animal reducer?

[00:05:54] So if you go into the animal one, and someone calls SET_ANIMAL,
>> Brian Holt: Okay, if someone sets the breed to be a different breed, so you go from Poodle to Havanese, you don't have to change the animal, right? It's still a dog, right? But the inverse is true that if I come into breed, if someone changes from cat to dog, Poodle doesn't make sense anymore.

[00:06:21] So you have to set that back to empty stream.
>> Brian Holt: So breedReducer, its entire world, the only thing it ever cares about is the breed, right? It doesn't care about animal, it doesn't affect any other reducer. Reducers don't talk to each other, right? The only thing this ever cares about is the answer to what is the currently set breed, and if you set the breed then that's the answer.

[00:06:48] If you set the animal then it's empty string, otherwise it's just whatever it was before.
>> Brian Holt: So that's a good question, but it has to do with your data dependencies.