Connect Redux to a React Application with react-redux

[00:00] While manually passing our State and Dispatch functions down through our component tree as props works, this can get pretty tedious.

[00:06] Luckily, we can cut down on some this by using the React Redux package. We'll add this by running Yarn add React-Redux.

[00:22] Now we have React Redux as a dependency in our project. In our index.js file, let's import a component that React Redux gives us called Provider, then repeat from react-redux.

[00:39] Now that we have Provider available, let's clean up our entry point. I'm going to come down here where we've created this Render function to wrap our call to React on render.

[00:48] We're getting our state out of our store, and then we're calling Render for the initial render. Then we have this store.subscribe that calls Render for each state change.

[00:57] We're going to pull these out of here and we're going to unwrap this from that Render function. We can get rid of this call to getState. The Provider component is going to take care of all this getting of the state and subscribing to state changes for us.

[01:14] I'm going to come into my React render call, and I'm going to wrap this state with this Provider component. Now we have a provider that wraps our app component. It's going to provide it with the store and subscription, but in order to do that, we need to pass in the store prop to Provider, and give it a reference to our store, which we're importing up here as store.

[01:46] Now that that's done, we can get rid of todos and current todo. For now, we're going to keep change current as a reference to our function that we're creating up here with blind action creators, but we can cut that code down, clean this up.

[02:06] Now our entry point for our application is much smaller. I'm going to save that.

[02:11] Now that we have our provider wired up, let's go over to the app component and use that provider. We're going to import the Connect function, and that's going to come from React Redux as well.

[02:25] Down at the bottom of our component, we're going to come down here where we're exporting our default app. I'm going to comment that out.

[02:33] Instead, what we're going to do is we're going to return the result of a call to Connect, where we're going to pass in our app and get back a connected component. I'm going to declare a new constant and I'm going to call this connected app.

[02:46] This is going to equal a call to Connect, which will pass some arguments. Then that's going to return a new function, which is going to accept app. That'll return our connected app, and then we can export default connected app.

[03:03] Connect accepts an argument called mapStateToProps. Let's create that. MapStateToProps is a function that's going to accept the entire state and return an object that represents the subset of the state we want to pass into our component. In this case, we want to pass the entire state, because it only consists of our todos array and our current todo string at this point.

[03:27] I'm just going to immediately return state, and then I want to pass mapStateToProps. Now our connected app component will receive our state properties as props, just like when we were passing them in manually, but now the Provider and the Connect function will work together to make that happen.

[03:46] Let's save this file and let's switch over to our browser and make sure this still works. We can see, when the browser loads up, that we're still loading our todos.

[03:56] If I type in the input, this will still update, which means it's responding to our dispatch action. Our Subscribe is running, and we're re-rendering our UI based on the updated state from our Redux store.