Using Redux with React

We’ve now covered how to create a store, how to dispatch actions, what exactly reducers do, and how we can use middleware. So far, we haven’t looked at how Redux interacts with React, so let’s do that now.

react-redux package can be used to make Redux work with React. This package includes the “Official React bindings for Redux,” which was originally developed by Dan Abramov (now part of the React Core Team). The package is maintained by the Redux community.

The package consists of two components: one component and a function that will create a higher-order component. The Provider component forms the entry point for Redux. We can wrap the component tree with a Provider component and then access a common store via the connect() function. This function returns a higher-order component and allows us to connect components to the store.

The Provider component

As most applications tend to only consist of a single store, it is useful to place the Provider component up high in the component tree. In many situations, it might even make sense to use the Provider component as the very first component of the component tree. The Provider component receives a Redux store as a store prop and contains many children. All children have access to the store prop value (the store provided) and can also read it or change it via the dispatching of actions. Let’s look at an example:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const dummyReducer = (state = {}, action) => {
  return state;
};

const store = createStore(dummyReducer);

const App = () => <p>We can have access to the Redux store here.</p>;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

In most recent examples, only the <App /> component was passed to ReactDOM.render(). Here, however, we place a <Provider /> component around the App and also pass a dummy store to it.

In theory, Provider components can be nested inside each other. Components connected to a store will always be the store of the next Provider component up. However, this is not common practice and leads to more confusion than necessary. When two stores exist in parallel, reducers of both stores should be combined via combineReducer() into one large store. This will allow the Provider to wrap around the rest of the elements using only a single store.

Connecting components to a store using the connect function

Now, on to the more difficult part of React with Redux: connecting a React component to a Redux store using a connect() function. This function can take up to four parameters, of which the first three are functions that can also take three parameters. That sounds like a lot. But rest assured, in most cases, we only really need two out of these four parameters, and the functions will only take a single argument. But let’s go through everything step by step, increasing the complexity with each step.

The function takes the following form:

connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps,
   options
);

Calling the connect() function will create a higher order component. It can be used to transfer parts of the state of the store to this component. To decide which parts of the state should be passed as props, we use the first parameter that is mapStateToProps. We will look at all four parameters of the connect() function step by step.