Connect Redux to a React Application with react-redux
In this lesson, we’ll see how we can eliminate some of our plumbing code and take advantage of the react-redux library to connect our Redux store to our React application and let it handle subscribing to state changes in the store.
[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.
+1, these all feel out of order.
seems the order has been corrected, no?
I am a bit confused. Please help to clarify.
For lesson 11, after you connect the App and do
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App)
export default ConnectedApp
How does it still work when on index.js. You run:
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
How does ConnectedApp get called?
Hey Thang, that was 3 months ago so I assumes you have the answer now.
Basically, ConnectedApp is export as default. So in index.js you can import it with any name you want. You can name it App or ConnectedApp or whateverComponent, depending on what name you want. In this case, and I guess it's just convention in general, we import these connectedComponent with their original name.
Where did bindActionCreators come from? Might pay to check the order of these videos more carefully as they seem very jumbled.