React Redux Connect — How to create container components in React that are connected to the Redux state.
React provides two major mechanisms for providing data to components namely: props and state. While props are read-only and allow a parent component to pass attributes to a child component, state is local and encapsulated within the component and can change at any time in the component’s lifecycle.
Since state is a very powerful mechanism for building powerful and dynamic React apps, it becomes necessary that state is properly managed in the application. Several libraries already exist, that provide a well-structured architecture for managing application state such as Flux, Redux, MobX.
This guide is based on state management in React applications with Redux using react-redux. It is not an introduction to either React or Redux.
It assumes you already have a fundamental understanding of React and the Redux architecture and API. If that’s not the case then you can check the React documentation here and the Redux documentation here.
React Redux Connect
The react-redux package provides React bindings for the Redux state container making it very easy for a React application to be connected to a Redux store. This allows you to separate your React application components based on their connection to the Redux store as follows:
- Presentational Components — These components are only concerned with how things look and are not aware of the Redux state. They get their data from props and may trigger callbacks passed to them via props.
- Container Components — These components are responsible for how things work and are fully aware of the Redux state. They are often created using React Redux and may dispatch Redux actions. They also subscribe to changes in the Redux state.
You can learn more about this separation of concerns from this article. In this guide, our major focus will be on container components that are connected to the Redux state using react-redux.
The react-redux package exposes a very simple interface, and all you should be interested in is just the following:
<Provider store>— Wraps the React application and makes the Redux state available to all container components in the application’s hierarchy
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],— Creates a higher-order component for making container components out of base React components
You can install react-redux in your project as follows:
npm install react-redux --save
Given that you already have a Redux store setup for your React application, here is how you can connect the app to the Redux store:
With this setup, you can now create container components, that are connected to the Redux store, within the hierarchy of the
AppRootComponent using the
React Redux Connect — When to use
1. Creating container components.
As stated in the previous section, the react-redux
connect() API is used for creating container elements that are connected to the Redux store. The Redux store to be connected to is derived from the topmost ancestor of the component using the React context mechanism. You have no need for
connect() if you are only creating a presentational component.
Whether you want to just get data from the Redux store, or you want to dispatch actions on the Redux store, or you want to do both in your React component, you can make the component a container component by wrapping it in a higher-order component returned by react-redux
2. Avoiding manual subscription to the Redux store.
You could create a container component yourself and manually subscribe the component to the Redux store using
store.subscribe(). However, using react-redux
connect() comes with some performance improvements and optimizations which you may not be able to implement in your application.
In the following code snippet, we attempt to manually create a container component and connect it to the Redux store by subscribing to the store, in order to achieve a similar
functionality as with the previous code snippet:
connect() also provides additional flexibility, allowing you to configure container components to receive dynamic props based on the props initially passed to them. This is useful for selecting a slice of the Redux state based on props, or to bind action creators to a particular variable from props.
If your React application uses multiple Redux stores, react-redux
connect() allows you to easily specify which store a container component should be connected to.
React Redux Connect — Anatomy of connect()
connect() function provided by react-redux can take up to four arguments, all of which are optional. Calling the
connect() function returns a higher-order component which can be used to wrap any React component.
Since a higher-order component is returned by
connect(), it has to be invoked again with the base React component in order to convert it to a container component:
const ContainerComponent = connect()(BaseComponent);
Here is the signature of the
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps(state, [ownProps]) => stateProps
This argument is a
function that returns either a plain object or another function. Passing this argument subscribes the container component to the Redux store updates, which means that the
mapStateToProps function will be invoked each time the store updates. If you are not interested in store updates, leave it as
mapStateToProps is declared with two parameters, the second one being optional. The first parameter is the current state of the Redux store. The second parameter, if passed, is an object of the props passed to the component:
If a plain object is returned from
mapStateToProps, the returned stateProps object is merged into the component’s props. You can access these props in the component as follows:
However, if a function is returned, that function is used as
mapStateToProps for each instance of the component. This can be useful for improving the rendering performance and for memoization.
mapDispatchToProps(dispatch, [ownProps]) => dispatchProps
This argument can either be an
object or a
function that returns either a plain object or another function. To better illustrate how
mapDispatchToProps works, you will need to have some action creators.
For example, say you have the following action creators:
1. Default Implementation
If you don’t supply your own
mapDispatchToProps object or function, the default implementation will be used, which simply injects the store’s
dispatch method as a prop to the component.
You can use the
dispatch prop in your component as follows:
2. Passing an object
object is passed for this argument, each function in the object will be taken to be a Redux action creator and will be wrapped into a call to the store’s
dispatch method so that it can be called directly. The resulting dispatchProps object of action creators will be merged into the component’s props.
The following code snippet shows how you can define
mapDispatchToProps by supplying an object of action creators, and how the action creators can be used as props to your React component:
3. Passing a function
function is passed, it is left to you to return an object of dispatchProps that binds action creators using the store’s
dispatch method. The
function takes the store’s
dispatch as its first parameter. As with
mapStateToProps, it can also take an optional
ownProps second parameter that maps to the original props passed to the component.
If this function returns another function, then the returned function is used as
mapDispatchToProps instead, which can be useful for improving rendering performance and memoization.
bindActionCreators() helper provided by Redux can be used within this function to bind action creators to the store’s
The following code snippet shows how you can define
supplying a function, and how the
bindActionCreators() helper can be used to bind the comment action creators to a React component’s
mergeProps(stateProps, dispatchProps, ownProps) => props
This argument, if passed, is a
function that takes
three parameters — namely:
stateProps — the props object returned from a call to
dispatchProps — the action creators props object from
ownProps — the original props received by the component.
This function returns a plain object of props that will be passed to the wrapped component. This is useful for conditionally mapping part of the Redux store’s state or action creators based on props.
When this function is not supplied, the default implementation is as follows:
The options object, if specified, contains options for modifying the behavior of
connect() is a special implementation of
connectAdvanced(), it accepts most of the options available to
connectAdvanced() with some additional options.
You can refer to this documentation to see all the options available to
connect() and how they can modify its behavior.
React Redux Connect — How to use connect()
Setting the store
Before converting a regular React component to a container component using
connect(), you have to specify the Redux store the component will be connected to.
Assume that you have a container component named
NewComment for adding a new
comment to a post and also showing a button to submit the comment. The component might look like the following code snippet:
For you to actually use this component in your application, you will have to specify the Redux store the component must be connected to, otherwise, you will get an error.
Sick of debugging web apps? Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket pairs session replay with technical telemetry to quickly understand what went wrong.
This can be done in two ways:
1. Set the store prop on the container component
The first way is to specify the Redux store on the component by passing a reference to the Redux store as the value of the
store prop of the component:
2. Set the store prop on a <Provider> component
If you wish to set the Redux store once for your application, then this is the way to go. This is usually the case for apps that use only one Redux store.
react-redux provides a
<Provider> component which can be used to wrap the root application component. It accepts a
store prop which expects a reference to the Redux store you want to use for your application. The
store is passed down to container components down the app’s hierarchy using React’s context mechanism:
As stated earlier, the
mapDispatchToProps functions passed to
connect() can be declared with the
ownProps of the component as the second
However, there is a caveat. If the number of mandatory parameters of the declared function is less than
ownProps will never be passed. But if the function is declared with no mandatory parameters or at least
2 parameters, then
ownProps is passed.
Here are a few scenarios:
1. Declared with no parameters
ownProps is passed because the function is declared with no mandatory parameters. Hence, the following will also work in a similar fashion, using the new ES6 rest parameters syntax:
2. Declared with one parameter
Here, there is only one parameter,
ownProps is not passed.
3. Declared with default parameter
Here, there is only one mandatory parameter,
state, because the second
ownProps parameter is optional since a default value has been specified for it. Hence, since
there is only one mandatory parameter,
ownProps is not passed and as a result it maps to the default value that was assigned to it—
4. Declared with two parameters
This is pretty straightforward.
ownProps is passed here since the function is declared with two mandatory parameters.
React Redux Connect — Conclusion
In this guide, you have seen when and how to use the
connect() API provided by the react-redux package to create container components that are connected to the Redux state.
While this guide, covers much of the anatomy of the
connect() API and its usage, it did not extensively show use case examples. You can find more of these in this documentation.
Clap & Follow
If you found this article insightful, feel free to give some rounds of applause if you don’t mind.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.