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

Brian spends a few minutes walking through the entire Redux integration in the application. After reviewing Redux, Brian refactors the Landing component to map the dispatching of actions to component properties.

Get Unlimited Access Now

Transcript from the "Redux Review" Lesson

>> Brian Holt: So yeah, let's draw out piece of code by piece of code exactly what's happening. So I have an interface, right? Right here in front of me. And I type the letter, I don't know, f, right? That kicks off an event here on the input. onChange, it calls this method, handleSearchTermChange, okay?

[00:00:24] handleSearchTermChange, we take in that event, we pass the ot setSearchTerm which is our actionCreator. So go over to our actionCreator.
>> Brian Holt: setSearchTerm takes in a searchTerm, and then, it returns an object, an action of type: SET_SEARCH_TERM, which we defined in actions.js to literally just be this string, right?

>> Brian Holt: Okay, actionCreators and then searchTerm: searchTerm, that's the actual value that we're gonna be passing to Redux. Okay, so that we dispatch that function. So if we go back to landing, which came from connect. Which is just a little tiny helper method that came from ReactRedux. What this is going to do is it's going to take this action.

[00:01:19] And it's going to hand it to your rootReducer. So let's go to Reducers. So, it ends up here, when you call it dispatch. Dispatch is going to do a little bit of misdirection but what actually ends up happening, is it's going to call your rootReducer with state and then the very same action object that you passed to it, right?

[00:01:42] When we called dispatch, we gave it an action, which came from our action creator, and that's going to end up here as the action. Does that make sense? Okay, we're going to call a switch based on the action type. So if it hits the case set search term, which is what came from actions, this same one.

[00:02:06] And remember in action creator we dispatched of type setSearchTerm so for the vector Reducers if it matches setSearchTerm here of action type then it's going to call the setSearchTerm Reducer, okay. So we come up here to the setSearchTerm Reducer. It gets passed in the old state. The same action that we dispatched from our action creator, it's going to create a new state with that search term mixed in and we're going to return the new state.

[00:02:37] That gets passed back to the store and this is now your new state. The other one gets thrown away, it's gone forever and our new state, the store It's this new state that we returned here from our Reducer. So this returns, and it goes back to our rootReducer, which returns back to Redux, okay?

[00:02:57] Now Redux has a new store. Because we used that provider to wrap Redux, or, yeah, to incorporate Redux into React, it has a subscription function that reacts to subscribe to so anytime Redux gets a new store that says, hey react I need you to update, by actually calling force update which is the one that I showed you previously.

[00:03:23] So then react kicks off a re-render, it says okay here is the new state re-render, your app re-renders and you end up with a new user interface and that's when you finally see the f show up inside of your application.
>> Speaker 2: So the question is, two questions, actually.

[00:03:45] How would you write this thing using the MapDispatch toProps?
>> Brian Holt: Let's see if I can remember it off the top of my head. No promises.
>> Brian Holt: So you write a const mapDispatchToProps dispatch and then return and object which has methods in it. So in this particular one, we would have like a setSearchTerm, method, which would be a function.

[00:04:25] And then we call dispatch(setSearchTerm). So maybe you call something else like dispatchSetSearchTerm with value search term, here you would map it here which would be mat state to props so now both, I think this is close if this is not exactly, if this isn't it. Dispatch is the same function that gets past this prop so you can treat it the same way.

[00:05:10] This now is this dispatchSetSearchTerm is now injected as a property to whatever components, in this case, landing. And then saying this.dispatch, what we would say is this.props.dispatchSetSearchTerm. You would drop that part.
>> Brian Holt: Right, and then here you would say, dispatchSetSearchTerm. So let's see if I can code off the top of my head.

[00:05:41] [LAUGH] Refresh. Yeah that's actually it. It's ill-advised to code on the fly when you're giving a workshop but nailed it. So that's how it looks. Why is this better? This is better because now it handles, this particular function right here is a better interface. So now landing can be used outside of Redux, right, it's not necessarily itself dependent on Redux, whereas before the dispatch idea is a very Redux centric API.

[00:06:17] So you have to ask yourself, do I want to move away from Redux. I would kind of argue that Landing is already kind of tied to Redux despite the fact it doesn't necessarily must be tied to Redux, personal decision. This is not typically the way I do it but you can definitely do it this way.

[00:06:34] And I would probably even argue this is maybe more common so pick your poison.
>> Speaker 2: Lots more questions.
>> Brian Holt: Okay.
>> Speaker 2: Okay first one backing up quite away, is there ever a situation where you would need to keep, or want to keep the old fate and how would you do that?

>> Brian Holt: I guess you would just keep it as a separate value in Redux, right? So, maybe you have like new search and old search term. And every time that someone calls a Reducer you would just move new search to old search term, and then you would keep new search term.

[00:07:10] But I mean, it's just an object, right? You can just put things on the object as a property.
>> Speaker 2: Okay, Martin has a long question, I think. Action creators, actions, and Reducers are now in separate files. Looking at code organization, how do you think of ideas such as dux where actions, action creators and Reducers are organized together?

[00:07:33] And gave a long URL for discussion.
>> Brian Holt: I don't know if I have an opinion. I certainly don't know anything about ducks, I'm not present with that. But I will say that there's many ways to organize this. This is just the most common way and the personally successful way I've done it, okay.

[00:07:52] [COUGH] So it looks like he has a question real quick. And then we can come back.
>> Speaker 3: I was wondering if you could just talk real quick again about the mapStateToProps. Like we're passing in state in there and then that function gets passed to connect. Is state the props that are coming back from Redux?

>> Brian Holt: State is the entire state of your Redux store.
>> Speaker 3: Okay.
>> Brian Holt: And then you're just returning the subset that this particular component is tagged to.
>> Speaker 3: Gotcha, thank you.
>> Brian Holt: Yep.
>> Speaker 2: Okay, Christopher, wants to know where exactly we are invoking the rootReducer?
>> Brian Holt: Where?
>> Speaker 2: Where?

>> Brian Holt: We don't specifically invoke the rootReducer ourselves. We dispatch an action and then Redux will invoke our root reducer for us.
>> Speaker 2: There's more, Bryan, can you explain the whole loop again, please? Sorry.
>> Brian Holt: [LAUGH] I will give you the high level but if you need it again, I would say just go back and watch the live video again, because it's a long explanation.

[00:09:04] But in the UI, we dispatch an action using an action creator, which then lands in the rootReducer via redux. rootReducer in Redux dispatches that to another reducer, which modifies the state, returns the new state, which gets stored back in Redux. Then you have your new state in Redux.

[00:09:25] Redux informs React that something has changed, and React updates itself.