How to nest smart components in Redux

Smart components are the container components which connect to the Redux storeThe place where the entire traceback route of the state is stored. and manage the application state. Smart components encapsulate the logic of fetching data, dispatching actions, and handling interactions with the Redux store.

Why do we need to nest components?

Nesting separate component files to structure a desirable user interface (UI) has the following advantages:

  • Avoid rerendering: Instead of passing down the props from the parent component to the children components, nesting allows us to connect the components avoiding any unnecessary re-rendering.

  • Modularity: It makes the application modular, where we can reuse the components across our codebase.

  • Easy debugging: Since we have a separate code for each component nested together, it would be easier to trace the exact error and debug the code.

The connect() method

You can nest Redux smart components using connect() method provided by the react-redux library. connect() is a high-order function that links each component with the Redux store to access the application's current state and dispatches actions. It also checks the conditions and decides if the container needs to be re-rendered.

Steps to achieve nesting

Note: This Answer assumes that you have already set up your react-redux application.

Let's suppose we have a three file hierarchy ParentComponent.js, ChildComponent.js, and GrandChildComponent.js as shown below:

Example component hierarchy
Example component hierarchy

Here's how we can use connect() method to nest them:

import { connect } from "react-redux";
const ParentComponent = props => {
    return (
        <div>
            <p>MainComponent Data {props.data}</p>
            <ChildComponent/>
        </div>
    );
};
const mapStateToProps = state => ({
  data: state.ParentComponentData
});
export default connect(mapStateToProps)(ParentComponent);

  • Line 7: <ChildComponent/> has been nested.

  • Line 16: ParentComponent is being connected to the Redux store using the connect() method.

import { connect } from "react-redux";
const ChildComponent = props => {
    return (
    <div>
        <p>ChildComponent Data {props.data}</p>
        <GrandChildComponent/>
    </div>
    );
};
const mapStateToProps = state => ({
  data: state.ChildComponentData
});
export default connect(mapStateToProps)(ChildComponent);

  • Line 7: <GrandChildComponent/> has been nested.

  • Line 16: ChildComponent is being connected to the Redux store using the connect() method.

import { connect } from "react-redux";
const GrandChildComponent = props => {
  return (
    <div>
      <p>GrandChildComponent Data {props.data}</p>
    </div>
  );
};
const mapStateToProps = state => ({
  data: state.GrandChildComponent
});
export default connect(mapStateToProps)(GrandChildComponent);

Conclusion

As your react-redux application grows, you'll need more components to add. The flexibility of connect() allows you to nest even more smart components per your needs.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved