React Redux connect deep explanation

Redux is a react library for state management, and has made working with React more manageable for everyone. However, there are a lot of cases where people blindly follow boilerplate code to integrate Redux with their React application without understanding all the moving parts involved. Everyone wants to know React Redux connect deep explanation.

When you are integrating Redux’s state management into a React application. I feel that it’s important to know what’s going on when you do something that essentially forms the backbone of your application.

React and Redux library

Redux and React are really two separate libraries which can and have been used completely independent of each other.

If you have worked with Redux before, you know that its functionality revolves around a “store”, which is where the state of the application lives. There is no way anyone can directly modify the store. The only way to do so is through reducers, and the only way to trigger reducers is to dispatch actions.

To change data, we need to dispatch an action.

Other thing is that, when we want to retrieve data, we do not get it directly from the store. Instead, we get a snapshot of the data in the store at any point in time using store.getState() , which gives us the “state” of the application as on the time at which we called the getState method.

To obtain data we need to get the current state of the store.

Putting them together

If you want to link your React application with the redux store, you first have to let your app know that this store exists. This is where you come to the first major part of the react-redux library, which is the Provider.

Provider is a React component given to us by the “react-redux” library. It serves just one purpose : to “provide” the store to its child components.

Connect

Now that you have “provided” the Redux store to your application, You can connect your components to it. you established previously that there is no way to directly interact with the store. We can either retrieve data by obtaining its current state, or change its state by dispatching an action.

React Redux connect deep explanation

This is precisely what connect does. Consider this piece of code, which uses connect to map the stores state and dispatch to the props of a component :

mapStateToProps and mapDispatchToProps are both pure functions that are provided the stores “state” and “dispatch” respectively. Furthermore, both functions have to return an object, whose keys will then be passed on as the props of the component they are connected to.

In this case, mapStateToProps returns an object with only one key : “todo”, and mapDispatchToProps returns an object with the destroyTodo key.

The connected component (which is exported) provides todo and destroyTodo as props to Item.

Redux is a powerful tool and even more so when combined with React.


Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.