How to connect Redux to a grandchild component

A significant number of developers incorporate Redux within their React applications because of the ease it provides in terms of handling complex data flows, which is to keep track of a large number of state variables.

With Redux, the state becomes a whole lot more manageable. This is primarily due to the globalization of the state in Redux, which enables us to access and update data comfortably.

Hierarchy of components

More often than not we find ourselves having the need to transfer data between components. When a component is enclosed within another component it is known as the child component and the enclosing component is the parent component. Subsequent children within the child component are referred to as grandchild components.

To pass information within such a structure, we can make use of Redux elements. Before that, let's quickly revise our Redux concepts.

Note: The traditional way in React involves passing variables or information using props.

Passing information in Redux

Redux provides us with two highly useful keywords that we've just covered above, Store and connect. To aid in our purpose of passing information within the hierarchy, the connect method is used which binds the components to the Redux Store.

Note: The Redux Store keeps track of all the state tree of our application. This allows the components to access the state directly from the store.

Connecting Redux to the components

In order to understand the working of connect, a short snippet is given below:

This line demonstrates how a component can directly be connected to the Store without hierarchy interventions.

In easier words, when we connect a component to Redux using connect, it creates a new version of that component that is connected to the Store. It can then access the state and dispatch actions as needed.

Grandchild components

A sufficient example to illustrate the connection of React components down to the grandchild level will include a hierarchy of components and their direct connection to the Redux Store.

Let's take a scenario in which we type a word in our parent component and it is accessible from the grandchild component as well.

Code Sample

The connect method with a grandchild

We see that the parent component ParComp contains the child component ChildComp which further contains GrandChildComp.

We will now connect these components to Redux.

ParComp is connected to Redux to dispatch the SET_RANDOM_WORD action whenever the user changes the input word.

• It uses the mapDispatchToProps function to map the setRandomWord action creator to the props of the parent.

Next, the ChildComp is connected to Redux to access the randomWord value from the store.

• It uses the mapStateToPropsChild function to map the randomWord state to the child’s props.

Finally, GrandChildComp is also connected to Redux for this reason. We use it to access the randomWord value.

• It uses the mapStateToPropsGrandChild function to map the randomWord state to the grandchild’s props.

The flow of data in the output

The black larger component depicts that the parent, child, and grandchild components are enclosed within it.

Whenever a user types a word, the word is updated through dispatching and actions. Since the child and grandchild have direct access to the Store, the updated word gets rendered within them.

Finally, we can see if we write "grandchild_data_sent", the grandchild component, since it is connected, will display the word as well.

That's it, with that, we've completed our connection to the grandchild component in Redux!

The crux of using Redux

By connecting ChildComp and GrandChildComp to Redux, we can allow them to access the randomWord value directly from the Redux store without needing to pass it through their parent component named ParComp.

The benefit of it? It mainly helps in separating concerns and making the components more modular.