This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Connecting Actions to the Search Box" Lesson
[00:00:00]
>> Brian Holt: So this is how you do reading, right? Where we're just reading from Redux right now but we're not doing any dispatching of actions, we're not doing any changes to Redux. So let's go make search box work because search box is actually the one that's doing all of the reading and writing to redux.
[00:00:21]
>> Brian Holt: So get rid of this Consumer import. And we're going to import connect from react-redux. And then we have to go import all of our action creators. So import getBreeds from./actionCreaters/getBreeds and we gonna get several of these, this one will be changeBreed.
>> Brian Holt: This one will be changeAnimal, changeAnimal.
[00:01:17] And this one will be change location. So now all of these are coming in. We've imported these from our action creators. We'll get rid of this consumer business right here because that's all coming from context or sorry we don't use context anymore we're using redux. So I can delete the wrapping stuff here.
[00:01:53]
>> Brian Holt: Anywhere that we say context dot
>> Brian Holt: So [INAUDIBLE] context that handle, location change or [INAUDIBLE] location you now select, highlighted all this and I'm just going to change this to this dot props dot whatever it was before.
>> Brian Holt: So you have to change it in ten places or something like that.
[00:02:24] So this.props.handleLocationChange, this.props.location, and then we're gonna go and inject all of these into our,
>> Brian Holt: Component here, our search box, okay? So we're gonna have to inject two things, the state and the action handlers, or the dispatch. So the first thing we'll make is const mapStateToProps, just like we made before.
[00:02:56] In fact, it's almost the same thing. So we'll get breed, breeds, animal, and location. And we'll return here an object that is just breed, breeds, animal,
>> Brian Holt: and location
>> Brian Holt: Okay, so all of these breed, breeds, animal and location that's all gonna be injected into search and then the next thing which we have not previously made is called map dispatch to props.
[00:03:31] So mapDispatchToProps,
>> Brian Holt: It takes in a dispatch.
>> Brian Holt: Parameter and then you return here an object of methods to dispatch actions to redux.
>> Brian Holt: So handle animal change Takes in an event.
>> Brian Holt: And whenever someone changes an animal, the first thing we have to do is dispatch. ChangeAnimal event.target.value
[00:04:25]
>> Brian Holt: What else happens when someone changes the animal? We have to get a new list of breeds, right? So the other thing that we gonna do here, is we gonna dispatch again and gets breeds. So unlike react, when we had to be cautious about set state getting batched, that does not happen here with redux.
[00:04:50] We can guarantee to you that this one will flush totally before this one happens, so it will cue up your actions. First, okay? So that's the first one. We'll do handleBreedChange, takes in an event, and it dispatches changeBreed of event.target. Target.value.
>> Brian Holt: And lastly here, handle location change, event, dispatch, change location of event.target.value.
[00:05:40] Okay, and then down here, connect. First one you'll provide is mapDispatchToProps, sorry, rather mapStateToProps, then mapDispatchToProps. There you go.
>> Brian Holt: So that was a lot, all at once. Let's kinda like recap here what happened.
>> Brian Holt: First things we did, we ripped out context totally in the search box here.
[00:06:11] We then imported all of our action creators that we previously wrote. We've imported connect from react-redux. So consumers gone now that I was using context, so now everything that was context dot something, we've changed it to this.props dot whatever. So now location and handleLocationChange that's all coming in via prompts that are being injected into this component.
[00:06:40] Okay, that's coming in through here, this, is mapStateToProps, this is pulling breed, breeds, animal and location out of our Redux store and injecting that into our search component here Via connect. So mapStateToProps calls this function here which returns this, which then gets injected into the search component. And then mapDispatchToProps, this is a bunch of functions that is being provided to search as well.
[00:07:12] So any time that someone calls this.props.handleAnimalChange, it calls this function Okay, or whatever, you know, handleBreedChange will call this one. Dispatch is how you give an action to Redux. It's like hey, I have this complete action. I want you to do this thing. So what is changeAnimal. Let's just go take a look to remind you what changeAnimal actually is.
[00:07:37] changeAnimal Brian: Just takes in an animal and returns an object that looks like this, right? So, this "SET_ANIMAL" one is just a payload it takes like this will be like dog or something like that, right? So, this is going to get displatched to the route reducer, which if you remember was reducers, here.
[00:07:57] We did combineReducers here. This made our root reducer for us. So we have one called animal, right? So let's go to our animalReducer. In the animalReducer, it's gonna take in the previous state of what animal was. So let's say it was cat, right? And action is gonna have a action.payload of dog.
[00:08:19] So it's gonna say is this a set animal action? It is, right? So it's going to return whatever the value of the action.payload is. In this case, we were changing it to dog. So now the new state, the store will be dog, right? And then it completes that action set.
[00:08:41]
>> Brian Holt: Once this happens, once it sees that it has a new state, Redux says, hey, React, I had something change from my story, you need to go and rerender now. And then it goes through and rerenders, it rereads from the store, and we're back to waiting on user action again.
[00:08:58]
>> Brian Holt: Does that whole circle make sense to you? You might not like it but hopefully it makes sense to you. It's a lot of steps right? It's a lot of steps. So I just want to go through that circle one more time, hopefully to help you again but we're gonna do it with the asynchronous action.
[00:09:21] So search box, we just completed our changeAnimal loop of events. Then right afterwards it dispatches a thunk that came from getBreeds. So it calls getBreeds. So let's go look at what's in getBreeds. Get breeds is gonna return a function that Redux then invokes, right? Redux calls this function, this getBreedsThunk function, okay.
[00:09:48] It's gonna go out, it's gonna go find petfinder. It's gonna call the petfinder API which does all this stuff. It's eventually going to get to here Once it has all of the data, right. So it's gonna go out and request all of our dog reads for us, right.
[00:10:03] This will be an array of dog breeds, okay. We're then going to dispatch a set breeds action, right. So that's gonna come back to our index reducers. It's gonna call this breeds reducer. So we go to breeds.js, and it say, are you a set breeds, action. It says, yes I'm a set breeds action.
[00:10:27] Then it returns the action, our payload which is the new list of dog breeds, right? That gets fed into the state Redux as I have a changed, it informs react, react calls a rerender. And inside of the search box when it goes here to read from this one right here.
[00:10:51] When it calls this stop prompt dot breeds that's reading from that thing that we just wrote to and so it's the new list of dog breeds. Do we get the whole circle? Okay, so let's go check and make sure this works. We just wrote a lot of code and something probably broke in that process.
[00:11:12] Tends to happen. So animal Click dog, it'll change that in the Redux store and then request new breeds, which it did.