This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Connect Redux to React" 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:

To make landing interact with the store, Brian first connects Redux to React with the react-redux package.

Get Unlimited Access Now

Transcript from the "Connect Redux to React" Lesson

>> Brian Holt: So now basically everything is completed on like the Redux side,but now we need to go in and make the UI actually dispatch out to Redux, okay? So I want you to go to hap.jsx just real quick.
>> Brian Holt: The first thing that we need to do is we need to basically make a Redux available to react.

[00:00:25] So we're gonna import.
>> Brian Holt: Provider,
>> Brian Holt: From react-redux.
>> Brian Holt: So react-redux is a package that all it does is it's just thin little bindings between react and redux that make it easier to write redux with react. It's by no means a hard requirement that you use React Redux, you definitely do not have to, but let me rephrase that you're gonna want to for sure.

[00:01:00] It just does a lot of the glue layer stuff that's really un-fun to do. And they do a good job at it. So inside of BrowserRouter, we're just gonna put Provider, and then again, right there, Provider.
>> Brian Holt: So yep, that's what I thought. Flow is gonna yell at you.

[00:01:26] And this is another advantage to using Flow here. It's gonna say, hey, I'm expecting something here called store and you did not give it to me. So, like I just forgot momentarily that you also have to provide it a store. So let's go ahead and do that real quick.

[00:01:42] So we're gonna go import store from ./store.
>> Brian Holt: And then here you're just gonna say store equals store.
>> Brian Holt: So, this is another reason that I like Flow. I love that my tools remind me to do stuff like this, cuz I totally would have forgotten and moved on right now.

[00:02:05] But that all happens because we have React Redux typings from Flow types. Something that people will point out to me is that you could totally, it makes no difference if Provider is on the outside or BrowserRouter is on the outside. It'll work either way. I intentionally chose it this way because we're gonna do server-side rendering tomorrow.

[00:02:26] That makes it a lot easier if it's organized this way, but if you weren't doing server-side rendering it wouldn't make a difference. Again this is what's called a higher order component. It self displays nothing, but it does some stuff for you that it's gonna put Redux on context, which is what we were talking about previously.

[00:02:44] So that we can refer to it in another places inside of our app. So, that is what's happening there.