How to connect React with Redux – react-redux example

https://grokonez.com/frontend/react/how-to-connect-react-with-redux-react-redux-example

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:

...
import { connect } from 'react-redux';

const BookList = (props) => (
    <div>
        Use {props.books}
    </div>
);

const mapStateToProps = (state) => {
    return {
        books: getVisibleBooks(state.books, state.filters)
    };
}

export default connect(mapStateToProps)(BookList);

-> 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:

More at:

https://grokonez.com/frontend/react/how-to-connect-react-with-redux-react-redux-example

How to connect React with Redux – react-redux example