This course has been updated! We now recommend you take the State Management with Redux & MobX course.

Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "react-redux: connect method" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Connect allows you to create higher order components that can connect presentational components to the Redux store.

Get Unlimited Access Now

Transcript from the "react-redux: connect method" Lesson

>> Steve Kinney: Okay, so we talked about react, and we talked about redux. I do wanna round back to this mysterious react-redux library that you saw me use with a bunch of methods that I only partially explained. So good news is you effectively saw almost all of it when we did that example.

[00:00:20] And so far that's even smaller than Redux. That it has basically two things in it. It has that provider component that I got very hand wavy about. And it has this connect function, which is used for creating higher order components. You could theoretically write connect yourself, right? Some of you have probably tried to connect yourself.

[00:00:41] It's pretty straightforward. Take these two objects, combine them, and return a function waiting for a presentational component. There is some black magic happening in there, that we'll talk about, and that's related to the provider. That's where things get a little squarely, but we'll discuss that. So that's it.

[00:00:58] Let's talk about connect first. So we saw before we have mapStateToProps, mapDispatchToProps, and yes it's a higher-order component pattern and you pick which things you want from the store, you can try transform the data if you want here to, right? So we just took the number of people value from the store, but you could theoretically transform that data if you want.

[00:01:22] So let's say you had a to do list and you had different visibility settings, like only show me the available ones, only show me the done ones or the undone ones or something along those lines, only show me the overdue ones. You could theoretically have the array of all of the to dos In your store, you can then also have maybe like what visibility filter they're set to whether it's done, or currently to do, or overdue.

[00:01:47] And maybe you do the transformation, you have to think about a map, a map is transforming an array a lot of times right We're taking this entire state tree We're transforming it into what the presentational component needs, so we could theoretically take the filter, take the array of items and create the subset of items that the component is expecting, right?

[00:02:10] So we can just pluck stuff the state tree but we can also transform it. And then mapDispatchToProps, which is just putting together the action creators that your component is going to need to change things. There's a chance that your application doesn't need both of these or your component doesn't need both of these.

[00:02:29] If it's just displaying state, you might not pass that second argument in. If it's just a button you might not have any states to give it, that is totally fine. You can omit mapDispatchToProps. You have to put something in the first argument in order to provide a second argument, otherwise the second argument is the first argument.

[00:02:47] So, you can pass in null or undefined to get yourself to the second argument in that case. Yep, you mix these two together and pass them as props to a presentational component, we saw this before, this will just theoretically, item should be pluralized here. This will pick just the items off the state tree.

[00:03:08] This would pass the entire state tree through. So, you would pass the entire tree in. This would theoretically filter all of the packed items. It's strange that I'm using these examples and slides again, it's almost like you're going to need it soon, very weird, cool. So then dispatch received the current stores dispatch method and allows you to create an object of methods that are eventually gonna call it.

[00:03:34] So you can do it by hand, like this, or our good friend bindActionCreators from Redux, right? You can give it this object of keys and functions, I'm using the, again the 6 short hand notation to just call them the same thing. And then you pass into dispatch and it will create that object for you.

[00:03:53] So whichever one makes you happier, you don't have to use bindActionCreators, you might not want to if you want to do some changes to things in there. But you can also, if you find yourself, it's tedious to create an object with the same methods as the action names and that passing the values through and calling dispatch you can use bindActionCreator, it's just a helper method that we wrote earlier.

[00:04:13] So we can see that's a very simple helper method.