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
Top comments (0)