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.

The React component

And a classic Redux store.

The Redux store

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

Redux store with Action dispatchers and the Reducer state

Reducer’s defaultState

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

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.