React-redux “connect” explained 🔗

New post! React-redux's

  • There is an entire library, called react-redux whose sole purpose is to seamlessly integrate redux’s state management into a React application.
  • Lets take a look at redux’s state management flow :

    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.

  • Now, let’s come to the (simplified) component structure of a standard react todo-mvc application :

    If we want to link our React application with the redux store, we first have to let our app know that this store exists.

  • However, because of the utility that gives us, I feel it’s more appropriate to represent it as something which “wraps” the entire application tree, like this :

    Now that we have “provided” the redux store to our application, we can now connect our components to it.

  • We can either retrieve data by obtaining its current state, or change its state by dispatching an action (we only have access to the top and bottom component of the redux flow diagram shown previously).

Redux is a terribly simple 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.

@SohamKamani: New post! React-redux’s “connect” and “Provider” explained : #reactjs #Redux

Redux is a terribly simple 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.

There is an entire library, called react-redux whose sole purpose is to seamlessly integrate 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.

At this point it’s hard for some to believe, but redux and React are actually two separate libraries which can and have been used completely independent of each other. Lets take a look at redux’s state management flow :

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. So ultimately :

method.

Now, let’s come to the (simplified) component structure of a standard react todo-mvc application :

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.

gives us, I feel it’s more appropriate to represent it as something which “wraps” the entire application tree, like this :

Now that we have “provided” the redux store to our application, we can now connect our components to it. We 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 (we only have access to the top and bottom component of the redux flow diagram shown previously).

to map the stores state and dispatch to the props of a component :

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.

key.

can be connected (In the above diagram, the connect is done through the Provider).

is clear.

If you want to know how to use redux in an efficient and easy to use manner for calling APIs, you should read my other post on a simplified approach to calling APIs with redux

React-redux “connect” explained 🔗