DEV Community

loizenai
loizenai

Posted on

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:

More Practice:

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay