This course has been updated! We now recommend you take the Complete Intro to React, v7 course.
Transcript from the "Dispatching Actions to Redux" Lesson
>> Brian Holt: So if you remember correctly we were doing Redux and integrating here on the landing page and we've now, quote unquote broken our input. Because we can type into it but it's not actually changing it. But we wrote the action, we wrote the action creator, we wrote the reducer, and we integrated it with that route reducer.
[00:00:21] So now we have to take that last step of dispatching an action to Redux. So let's go ahead and go write that up right now. So let's go over to landing.js
>> Brian Holt: And we're gonna add a couple of things.
>> Brian Holt: So we're gonna add a new method here called handleSearchTermChange.
[00:00:59] That's gonna take in an event.
>> Brian Holt: And so, something else connected us for us automatically. We don't have to do anything to opt into this. Is it injects an additional prop called dispatch? We're just gonna use dispatch directly to dispatch actions to Redux. I know some people frown on this but there's kind of a split community on how to do this.
[00:01:32] Remember how we did mapStateToProps down here? There's also mapDispatchToProps, which is a second parameter that you'd put in here, mapsDispatchToProps. We're not gonna put it in there but you can do a similar things where you actually make kind of like your own dispatching functions, which then get injected.
[00:01:48] I find that a little too indirect. I don't see. Yeah, anyway we're not gonna do it that way. So what we're actually gonna do is we're just gonna use dispatch directly. So we can just say this.props.dispatch, which again is coming from connect, it comes from here, that's where dispatch comes from.
>> Brian Holt: And then, we're going to call, we'll come back to this in just a sec. We're gonna import up here
>> Brian Holt: That action creator that we wrote. So we're going to import setSearchTerm from ./actionCreators.
>> Brian Holt: Then, down here, we're going to dispatch the results of setSearchTerm. We're gonna pass in event.target.value.
>> Brian Holt: And then, we also have to put that as an on change for this input. So onChange= this.handleSearchTermChange.
>> Speaker 2: Couple questions. For map state props, should they always declare the state that they need?
>> Brian Holt: Yes. [LAUGH]
>> Speaker 2: Follow on is that in big apps, can that get messy?
>> Brian Holt: It does get messy, I guess technically you could just return all of state here. And you would get the entire state injected as props. I would assert that that is messier. That now every Redux connector component has access to the entire state tree, and that is a mess.
[00:03:52] So it's better to be explicit and say I require these things. So if you have really messy map state to props, you might have a problem where you might wanna split things into multiple components. Just a thought.
>> Speaker 2: Okay.
>> Brian Holt: But there also might be times where you just need to do it, and that's okay.
>> Speaker 2: Jack was asking about the, you had said earlier that we would do data down and events up.
>> Brian Holt: Mm-hm.
>> Speaker 2: And that was going to change? My response to that is that it hasn't changed, it's just with Redux, you get the data the date where you need it instead of having to parsing it through all the layers.
>> Brian Holt: Yes, so actions or props down actions up. We are literally dispatching actions. So now it's just not going up the Redux tree. What it's doing is it's going into the Redux stack. But it's still props down, actions up.
>> Speaker 2: He was asking,
>> Speaker 2: What's an example of deep nesting?
[00:04:52] And have you seen anything extremely deep?
>> Brian Holt: Yeah, no, I mean if you've worked with React any sort of amount of time you're definitely gonna see the data towing problem. And I mean, my example is, like ClientApp here we have two particular,
>> Brian Holt: Components that care about preload.shows.
[00:05:12] So this has to live at the router level. But imagine with search, say I had like ten layers deep before you got to the show card, would actually need to use the show. So it would have to be explicitly passed down from each component to each component. That would be a data tunneling problem.
>> Speaker 2: What do you think is too deep before you start deciding to go to Redux.
>> Brian Holt: I don't if I would necessarily make that the deciding factor.
>> Brian Holt: How many layers deep it would probably be how wide the data has to go, how many different components you need to access the same amount of data, and at that point centralizing your data to one source of truth is a helpful paradigm.
>> Brian Holt: But this is very much a personal decision though. That's what I really wanna say.
>> Speaker 2: Yeah. A different question. Do we need to know how maps data props is implemented under the hood?
>> Brian Holt: No, cuz I certainly don't.
>> Brian Holt: The basic gist of what's going on, let's see, where am I?
[00:06:19] I'm in landing, is you've taken the full state, and you return a sub set of state that you want. That's it. The end, there's not anything more to it than that.
>> Speaker 2: John was asking, do we need to add dispatch, I guess it is, to prop types, the linter is saying it's missing a prop.
>> Brian Holt: We do.
>> Brian Holt: I was getting there, I promise. But that's fine.
>> Brian Holt: So I'll save that.
>> Brian Holt: And now we've completed the whole loop. So let's go make sure it works first. Refresh the page, and now you can actually modify it. Let's make sure I'm not having any, yeah whatever it gets no connection, I don't care.
[00:07:23] I don't know what that actually is, but anyway. Now, whatever is in this particular input field is going to be a reflection of what's in Redux and we're able to modify it via actions. So let's actually go draw out the circle of everything that happens.
>> Speaker 2: Okay.
>> Brian Holt: Question?
>> Speaker 2: Question. They would like a little more explanation about dispatch itself.
>> Brian Holt: I mean, what dispatch is actually gonna do is? So let's go through the entire lifecycle. If it still doesn't make sense, then we can dwell a bit more on the function of dispatch. But the TLDR is it takes, it creates an action or rather, you create an action and then you pass that into the root reducer.
[00:08:17] That's what dispatch does, is it dispatches an action to the root reducer.