How to connect React with Redux – react-redux example

We have created a React Application with React Router v4, then we also learned how to use Redux to manage state in Redux combineReducers example and Redux Reducer example – filter & sort data. In this tutorial, we’re gonna combine all of them by connecting React with Redux using react-redux.

Related Posts:
How to filter list with input text – react-redux example
How to sort list – react-redux example
Add Item Form – react-redux example
How to test React Redux application with Jest

More Practice:
React Redux – Firebase CRUD Operations example
React Redux Firebase Authentication – Google Account Sign in/Sign out example

React Redux

connect() function

react-redux is a Redux binding for React that allows us connect React with Redux in an efficient way.
The most important function is connect() that:
– connects a React Component with a Redux Store.
– returns a new connected Component class without modifying the Component class passed to it.

This is how we use connect() function:

-> mapStateToProps get books props from state.
-> connect() function get the function as parameter and apply to BookList Component to return a new connected React Component that can work with React state.

We can use connect() with one or more arguments depending on the use case:

Please visit React Redux API – connect for details.

We have 2 important arguments:

mapStateToProps(state) function connects a part of Redux state to React Component props.
The returned props of this function must be a plain object, which will be merged into the connected Component’s props, now it will have access to the exact part of Redux store.

mapDispatchToProps(dispatch) function is similar to mapStateToProps, but for actions. It connects Redux actions to React props. Therefore connected React Component can dispatch Redux actions.


In the example above, we use mapStateToProps to connect Redux state to React BookList Component props. But it’s not enough.

=> We have to do one more thing: make the Redux store available to the connect() call in the Component hierarchy below. We will wrap a parent or ancestor Component in Provider.

Provider is an high order component that wraps up React application and makes it aware of the entire Redux store. That is, it provides the store to its child components.

So if we want our entire React App to access the store, just put the App Component within Provider.

Once we connected Redux state to React Component props, every time state is updated, props changes.

Example Overview


We will build a React Application using React Router v4 and Redux. It can get App state data and display them in a Component:


Project Structure

We have 2 main parts:

1- Redux

With our desired state like:

We will have folder tree like this:


– Redux Actions and Reducers are separated in actions and reducers.
stores folder contains Redux Store Component which is created from result of combineReducers(books, filters).
selectors/book.js exports a functions that returns list of Book items after filtering and sorting.

2- React Components

The folder structure is just like React project that we have learned before:


AppRouter for implementing React Router.
DashBoard, AddBook, EditBook, Help, NotFound are React Components that will work with Router.
BookList Component is a child Component of DashBoard. In this Component, we use react-redux connect() function. Then props that is gotten from state will be used in Book Component – child of BookList Component.
– We will use react-redux Provider inside app.js.

3- React Redux App Structure

Our project structure is combination of 2 folder structure above:



Setup environment
Install Packages

– Open package.json:

Run cmd yarn install.

– Add plugin to .babelrc:

Configure Webpack

Open webpack.config.js:

historyApiFallback option is specifically for webpack-dev-server. Setting it true will effectively ask the server to fallback to index.html when a requested resource cannot be found (404 occurs).

Create Redux Actions



Create Redux Reducers



Create Redux Store


Create Selector for filtering and sorting


Create Components

– For each Page that displays when clicking on Navigation item, we add one Component. So we have 4 Components: Dashboard, AddBook, EditBook, Help.
– We need a Component for 404 status, it’s called NotFound.
– Now, we put a group of NavLink in header of Header Component:

Connect React Components with Redux

Dashboard has BookList as a child:

– In BookList Component, we use react-redux connect() function:

props that is gotten from state will be used in Book Component – child of BookList Component:

Create Router

Inside routers/AppRouter.js:

Run and Check Result

– get store.
– dispatch addBook action after every second (we want to check if Component props is updated whenever state changes).
– use react-redux Provider to make Redux store available for connecting with React Components.

Check Result


Source Code


For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

More Practice

Add remove Button for each Item

Using react-redux connect(), we can call Redux dispatch() function directly:

Source Code


By grokonez | April 17, 2018.

Last updated on August 23, 2018.

Related Posts

3 thoughts on “How to connect React with Redux – react-redux example”

  1. Thank you very much. I saw alot of examples that didn’t even work. This works out of the box. And it uses Yarn, Scss and React-Router-v4!

  2. this would be much better without sass – which always fails to compile it’s native bindings for me.

    Downloading binary from
    Cannot download "":

    HTTP error 404 Not Found

    Hint: If is not accessible in your location
    try setting a proxy via HTTP_PROXY, e.g.

    export HTTP_PROXY=

    or configure npm proxy via

    npm config set proxy

    followed by a whole bunch of make errors.

Got Something To Say:

Your email address will not be published. Required fields are marked *