Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Dispatching Actions to Redux" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian addresses the issue typed text in the input not being sent to Redux. To address this problem, Brian sets actions that are dispatched to Redux using the dispatch() method. With this in place, a component calls dispatch() on its props object and pass the executed action.

Get Unlimited Access Now

Transcript from the "Dispatching Actions to Redux" Lesson

[00:00:00]
>> Brian Holt: Okay, so now we have search term which is going to be injected as props in the landing, right. So now landing has the ability to read from its props and it's gonna be reading search term which is a string, right. Cuz now we're back inཏོ་flow land.
>> Brian Holt: And then what we're gonna do here in the input Is we're gonna say value={props.searchTerm}.

[00:00:36]
>> Brian Holt: So just to prove to you this works, I'm just gonna go into my reducer just super quick. Change this to something, and save. Now if I go back to landing here,
>> Brian Holt: Notice, whatever, ignore your console for the moment. Notice that something is inputted in there into the box, right?

[00:01:00] So that's being from read from Redux. The problem that we have again is what happens if I try and type in it. Nothing happens because it's continuing to read from Redux and nothing is updating Redux, right? We wrote all that set search term stuff but nowhere is it being invoked.

[00:01:17] So let's go close out loop and make it invoke. Okay, so we're gonna go back to landing.jsx. And what we're gonna do is we're gonna make another one of these called const mapDispatchToProps. That's gonna be equal to or it's gonna take in dispatch, which is gonna be a function.

[00:01:50]
>> Brian Holt: And that is going to return an object, as well. And this object is going to have a handle,
>> Brian Holt: SearchTermChange, which is gonna be a function.
>> Brian Holt: It takes in an event. And then that event is going to dispatch the results of SetSearchTerm with event.target.value.
>> Brian Holt: Okay, we need to go import our setSearchTerm function, so we're gonna do that real quick.

[00:02:31] Import {set,
>> Brian Holt: SearchTerm } from './actionCreators'.
>> Brian Holt: And then last thing we need to do is we need to take this map, dispatch to props and pass that in as the second parameter to connect.
>> Brian Holt: I did a lot there, so let's make sure that we recount what happened, okay?

[00:03:03] I wrote this, mapDispatchToProps, right? This is going to create methods that landing is going to be able to invoke, to dispatch events to redux, okay? That's the whole point of mapDispatchToProps is dispatching actions into redux. It's gonna take care of all of that for us. We're going to write methods that take care of that for us, okay?

[00:03:29] So mapDispatchToProps, it's going to return an object and everything on this object is going to be injected as props into landing, okay? So I have this handle search term event, or handle search term change, right, which takes in an event. And based on that event, whatever that event.target.value is for that event, it's going to dispatch, or it's going to pass that into set search term, right?

[00:03:59] So if we go into, you remember our action creators? We created this set search term action creator, right? Where you pass in a search term, and it gives you a well formatted action, right, cool?
>> Brian Holt: So given a searchTerm, which is coming from event.target.value, it's going to create a new action of type SET_SEARCH_TERM, and payload searchTerm, right?

[00:04:27] So this just returns an action. There's nothing magical here, or I don't know. It depends on what you define magical is. So go back to landing. That's what this does, this dispatch function is to say, here redux, here's an action, right? It's just going to pass it into your, it's going to end up being in your route reducer.

[00:04:46] That's where that action is going to get routed eventually, okay?
>> Speaker 2: The event target value is what they typed up.
>> Brian Holt: Right, in fact, let's just go ahead and do that. So onChange here Is gonna be props.HandleSearchTermChange. We're also gonna have to declare that in our prop types.

[00:05:07] HandleSearchTermChange is going to be a function. Right, so maybe that's a little more clear now. onChange is gonna call props.handle.searchTermChange. This got injected from here, right, from this one that we wrote down here, okay? And then this got injected into redux right here via the connect method. So all the connect method really is doing, is it's taking stuff, these objects and they're injecting them into your components so they can be used as props inside of your component.

[00:05:47] That's really all connect is, there's not really a lot more to it. It's just calling, it's like I got this thing from the user, I'm gonna call this function and inject these objects as props into this particular component.
>> Brian Holt: Okay, so that's what happens on the UI.