This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Hooking Up Redux to React" Lesson
[00:00:03]
>> Steve Kinney: So, we know Redux, but now we want to bring it into a React app. So, we're gonna do the same thing we did with flux, where I'm going to code a very simple example, then we're gonna talk about it. And then we'll do it together again, right, cuz there's just some moving parts and some abstractions.
[00:00:20] So I think seeing it in action to see what the thousand-foot view is, and then we'll conceptually talk about it, and then we'll get into the weeds and do it one more time. All right, so I'm gonna do it with a pizza calculator and I've given myself a little bit of starting points here.
[00:00:41] You can see, oops, I've got,
>> Steve Kinney: This createStore where I'm gonna get the reducer and the initial state. I don't need to combine reducers for the pizza calculator because it is a very very simple application. Let's take a look at the actions. We update the number of people with a value.
[00:01:04] We update the slices per person with a value. We reset the calculator, right? We've seen this repeatedly. The reducer looks like it should look at the initial state, the initial state is gonna be that 10 and 2 that we've used repeatedly, and we'll also have this calculate numbers of pizzas needed as well that we can kinda keep track of.
[00:01:23] And we'll talk about this in a second, but the real two that we're gonna use right now are the number of people and the slices per person. Those are the two that we care about at this point. So those exist in the initial state and reset will obviously put them back.
[00:01:40] So we have our actions, we have our reducers. We do need to connect it up to react now. And could you theoretically do what we did with Flux yesterday, which is import the store into each one and do on component did mount, and then you could do all of that, right?
[00:02:01] But Redux actually gives us another obstruction that we can use so that we don't have to do that manual putting it in, waiting for the component did mount to subscribe, and then when component will unmount, unsubscribing, and then setting the state in each one of those. We don't have to do all of that because there's another obstraction that we're gonna talk about in a little bit.
[00:02:17] But first I'm gonna be a little hand wavy about it. And just note that we wrap the entire application in this provider, and we pass it a instance of the store. I will talk more about what that is doing under the hood later. So just go with the flow for now, and we'll get into it.
[00:02:37] But this is, again, some of the black magic that happens with this react-redux library. Which is why I feel strongly about talking Redux first, or react first, separately, and then talking about bringing together, but as soon as you mix in, what does this black provider do when we get to the connect function?
[00:02:56] What does that do? It becomes very unclear where the lines are, so that's why we talked about Redux first. All right, great, so I've got all of my Redux effectively set up. What I need to do is I need to create my container components, right? I want these ones to hook up to the Redux store and pass them to the presentational components.
[00:03:14] So right now, these are all wired up to be presentational in this example. They just take all the arguments that they need. So input takes a whole bunch of props and it doesn't have anything to do with it. Reset is a button that takes a single function as a prop to what you'd like to do when the reset button is clicked.
[00:03:33] Result just takes some state and title doesn't really. Title could take a name but apparently I don't use it for anything, very cool. So these are all stateless components, dumb components. They receive everything they need. Very easy to test, you pass stuff in, you see if it has the things that it needs to have.
[00:03:51] I have these containers here. And right now, does anyone have any questions about this code? So far, so good? Cool.