by Princiya

How to connect React to Redux — a diagrammatic guide

This post is aimed at people who already know React and Redux. This will aid them in better understanding how things work under the hood.
When I first got into the React universe ?, ~3 years ago, I had a very hard time understanding how Redux’s mapStateToProps and mapDispatchToProps worked and were available to the React component. Here is a diagrammatic guide to better understand how Redux’s connect works with React.

Let’s say we have a Search component.

yeNSSUoWNolHcFSii8upbgsk0sibV2rOmYx6
The React component

And a classic Redux store.

KgSZIWLrfkK8rjXnpFypjFVbDKoAbXsQcmGs
The Redux store

Let’s populate the Redux store with Action dispatchers and the Reducer state.

emKlOkw4wHukOHIfz6gH0jkILnJOrs1iZ78S
Redux store with Action dispatchers and the Reducer state
WmHJjNMWtHHyBsBbSnRs4YJkta7GnEirCtkp
Reducer’s defaultState

The Reducer’s defaultState looks like this. The action parameter inside the Reducer function comes from the dispatchedAction.

HRHjMZducEgR-5YbL6O2JmI7HsTBV3NbpMoX
Connect React component to the Redux store

Let’s connect the React search component with the Redux store. The React-Redux library has official React bindings for Redux.

It provides the connect function to connect the component to the store.

mapDispatchToProps means map the Action’s dispatch function to React component’s this.props .

The same applies to mapStateToProps , where the Reducer’s state is mapped to React component’s this.props .

PW4bKo1FbTcCmOL4cJxO0wQ02ZKxWkgqp8kn
React to Redux connect flow
  1. Connect React to Redux.
  2. The mapStateToProps and mapDispatchToProps deals with the Redux store’s state and dispatch, respectively.
  3. Reducer’s state and the Action’s dispatch are available via this.props to the React component.

Let us summarize the entire React to Redux connect workflow via a button click from the React search component.

xkGNd8KHWKzjY-ZAnIisJXRXTmZ0NPdluxFw
React to Redux connect flow via button click
  1. Click the submit button on the React search component
  2. The click function dispatches an Action. The Action dispatch function is connected to the search component via mapDispatchToProps and is made available to this.props
  3. (out of scope for this post) The dispatched action is responsible to fetch data and dispatch another action to update the Reducer state
  4. The Reducer state updates itself with the new search data available from Step 3.
  5. The Reducer state is already connected to this.props in the search component via mapStateToProps
  6. this.props has the latest search data and the view now re-renders to show the updated search results