28. Generating Containers with connect() from React Redux (AddTodo)
In the last section we used connect() to set up our VisibleTodoList component.
Since these examples have all of our JavaScript written in a single file, we need to rename our mapStateToProps and mapDispatchToProps functions to be more specific. Note that this doesn't need to be done if we keep all of our components in separate files.
Recall that our AddTodo component wasn't clearly a presentational or container component. However, it does rely on store for the dispatch() function.
Instead of reading store from the context, we are going to refactor AddTodo to read dispatch from the props. This is because AddTodo only needs dispatch(), not the whole store.
We will be creating a container component using connect() that will inject the dispatch function as a prop. We will remove AddTodo.contextTypes because the component generated by the connect() function will take care of reading the store from the context.
Before:
const AddTodo = (props, { store }) => {
.
. // inside `return`
.
<button onClick={() => {
store.dispatch({
.
.
.
}
AddTodo.contextTypes = {
store: React.PropTypes.object
}
After:
let AddTodo = ({ dispatch }) => {
.
. // inside `return`
.
<button onClick={() => {
dispatch({
.
.
.
}
// No more `AddTodo.contextTypes`
Notice that we changed const to let in our declaration. This lets us reassign AddTodo so the consuming component doesn't need to specify the dispatch prop. We don't have to specify dispatch as a prop because it will be injected by the component generated by the connect call.
The first argument to connect() is mapStateToProps, but there aren't any props for our AddTodo component that depend on the current state. Because of this, we'll have our first parameter return an empty object.
The second argument to connect() is mapDispatchToProps, but AddTodo doesn't need any callback props. Because of this, we'll just return the dispatch function itself as a prop with the same name.
We'll call the function a second time to specify the component we want to wrap (in this case AddTodo itself).
AddTodo = connect(
state => {
return {};
},
dispatch => {
return { dispatch };
}
)(AddTodo);
Now AddTodo won't pass any props dependent on state, but it will pass dispatch() itself as a function so that the component can read from the props and use it without worrying about context or specifying any ContextTypes.
But it's wasteful...
Why subscribe to the store if we aren't going to calculate props from the state? Because we don't need to subcribe to the store, we can call connect() without mapStateToProps as an argument, instead passing in null. What this does is tell connect that there is no need to subscribe to the store.
It's a common pattern to inject just the dispatch function, so if connect() sees that the second argument is null (or any falsey value), you'll get dispatch injected as a prop.
What this means is that we can accomplish the same effect as the above code by removing the arguments from the connect function:
AddTodo = connect()(AddTodo)
Now the default behavior to not subscribe to the store, and inject dispatch as a prop.