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.

Provider

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

Goal

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:

Practice

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).

Redux

Create Redux Actions

actions/books.js:

actions/filters.js:

Create Redux Reducers

reducers/books.js:

reducers/filters.js:

Create Redux Store

store/store.js:

Create Selector for filtering and sorting

selectors/books.js:

React

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:
Header.js

Connect React Components with Redux

– Dashboard has BookList as a child:
DashBoard.js

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

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

Create Router

Inside routers/AppRouter.js:

Run and Check Result

app.js

– 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

ReactRedux

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:
Book.js

Source Code

ReactRedux-addRemoveButton

By grokonez | April 17, 2018.

Last updated on August 23, 2018.