CODEWITHSUNDEEP
reactjsreact-reduxreact-props
shadowmaster
shadowmaster

Reputation: 33

Passing Redux store data as Props from parent1 -> parent2 -> child (OR) call redux store directly in Child component with mapToStateProps?

Does passing the Redux store data from Parent components(where it is already being used for some other functionality) to child component as props better than directly calling the Redux store in child component?

I've tried both passing down the props as well as call directly in Child component. Couldn't find much difference in the functionality, just wondering what is the standard practice and how it effects performance for huge data.

ExampleReduxdata: {'Apple', 'Banana', 'Mango', 'Orange'}

    class ParentComponent1 extends React.Component {

    render(){
     return (<ParentComponent2 reducerData={this.props.reducerData} />
    }

    const mapStateToProps = {

    reducerData: state.ExampleReduxdata,
     }
    }
    class ParentComponent2 extends React.Component{
    render(){
     return (<ChildComponent reducerData={this.props.reducerData} />
     }

    }
    (OR)


    class ChildComponent extends React.Component{

    render(){
     return (
        <div>{this.props.reducerData}</div>
       );
    }

    const mapStateToProps = {

    reducerData: state.ExampleReduxdata,
    } 

    }

Upvotes: 2

Views: 137

Answers (1)

Afsanefda
Afsanefda

Reputation: 3339

Based on the main Redux Documentation :

React bindings for Redux separate presentational components from container components. This approach can make your app easier to understand and allow you to more easily reuse components.

So I suppose for making your components reusable and follow the Single source of truth principle it's better to wrap your component with connect method!

Another easy way to avoid these methods and wrappings in functional components is redux hooks useSelector and useDispatch.

Upvotes: 1

Related Questions