Intermediate React Connecting to React with react-redux

Transcript from the "Connecting to React with react-redux" Lesson

[00:00:00]
>> Brian: Let's go actually make this work with redux itself.
>> Brian: So rather we're gonna open app.js again.
>> Brian: And we're just going to import the provider.
>> Brian: import [ Provider as ReduxProvider },
>> Brian: from './', not './', reactRedux.
>> Brian: So now this gives a ReduxProvider. It works just like the provider from context that we have previously talked about.

[00:00:57]
>> Brian: And then down here wrapping this Provider right here or inside, it doesn't actually really matter too much. We'll put it on the outside here, I guess. So ReduxProvider, store is going be equal to store. And I have to import that store from ./store. So I'll show you that here in just a second

[00:01:29]
>> Brian: And then you can see up here, I imported store right there on line 10.
>> Brian: Okay, so that's ReduxProvider right there.
>> Brian: So now anywhere that I want to grab the Redux store state, I can do that because now I have this ReduxProvider here.
>> Brian: So just to kinda show you what that looks like before we kinda change that for good.

[00:02:09] We're just doing location at the moment, and then I'll show you the rest and how to connect everything back up. So just go ahead and delete LocationChange right here. And we'll drop that as well from our state. And we'll drop Location from here in our state, as well.

[00:02:24] So I'm deleting everything to do with location, inside of our app.js.
>> Brian: Okay?
>> Brian: Now,
>> Brian: Just to kinda show you how that works and then we'll refactor here in just a second. I'm going to,
>> Brian: Yeah, let's do this this inside of Results. So inside of Results.source, right here,

[00:03:11]
>> Brian: Right now, everything is coming from the searchParams here in the context.
>> Brian: Yeah, this got messy quickly, but that's okay. const function ResultsWithContext, here. I'm gonna do a thing here called mapStateToProps, const mapStateToProps. This is at the bottom of results.js. This is gonna be equal to a function with animal, breed, and we'll just do actually location at the moment.

[00:03:53]
>> Brian: And then we're going to return an object here of location.
>> Brian: And then we're going to export default connect(mapStateToProps) and (ResultsWithContext).
>> Brian: So this automatically, not http2, wow. We want this from react-redux.
>> Brian: So that's what this connect function does. [COUGH] It takes the mapStateToProps function that we use, it grabs data out of the store, looking here.

[00:04:46] So this is the store, right? This gives you everything inside of the store and I'm just grabbing the location out of it. And I'm returning here an object. If you're confused about what this is, you could totally put,
>> Brian: Like this.
>> Brian: return, that's it, so that's what this is actually doing.

[00:05:10] It's just returning an object with location: location, right? So I'm connecting this, I'm connecting the results with context to the react store and it's going to inject location as a prop to ResultsWithContext, which then get passed on to these props. Which then eventually get passed in to Results.

[00:05:32] It's kinda several steps there, but that's okay, right? What I want you to observe at this is the mapStateToProps, right? We call connect into the first function here with mapStateToProps. And this is one function that returns another function that we're calling right here with ResultsWithContext, which is injecting location into ResultsWithContext.

[00:05:54] So now, up here in Results, on this.props, this.props.location like that.
>> Brian: location, location.
>> Brian: Yep, that's good. So now this.props.location is coming from the Redux store. So everything here should still work. We just won't be able to update it right now cuz we haven't written that part of the code.

[00:06:32]
>> Brian: So is this running? It is, okay, localhost.
>> Brian: Which is going into the search box, right? And search box reading it from context. So we'd have to do that as well. So we'll get there in just a second, but do you see how we get data out of Redux and into a React application?

[00:07:05] Does that make sense?
>> Brian: We use this mapStateToProps, connect is a function that we give this function to. And that will inject that as props into ResultsWithContext. And that's all that mapStateToProps does.