CODEWITHSUNDEEP
reduxreact-redux
Kim
Kim

Reputation: 956

Is it better to send redux state down to children as Props or for the Children to directly read from redux state?

I realize this is a fundamental question that may have been answered before, but I'm looking for a definitive answer, with perhaps some reasoning, as I've not quite found one that convinces me that there is better/best/preferred way to do handle this.

Scenario: A dashboard component receives redux state via connect. Some of the data is shared across the dashboard and its children. Some of the data is specific to the dashboard's children.

Question: Should I always pass the props down to the child components (something) like the below, or should I always connect the child components to redux and read the needed data directly from redux state?

import React, { Component } from "react";
import { connect } from "react-redux";
import ChildOne from ".ChildOne";
import ChildTwo from ".ChildTwo";

class DashboardExample extends Component {
  render() {
    const { sharedData, childOneData, childTwoData } = this.props
    return (
      <div>
        <h1>{sharedData.selectedDate}</h1>
        <ChildOne sharedData={sharedData} childOneData={childOneData} />
        <ChildTwo sharedData={sharedData} childTwoData={childTwoData} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  sharedData: state.dashboardData,
  childOneData: state.childOneSpecificData,
  childTwoData: state.childTwoSpecificData,
});

export default connect(mapStateToProps)(DashboardExample);

Upvotes: 1

Views: 49

Answers (1)

victor.ja
victor.ja

Reputation: 888

As Dan Abramov said, it’s nice to have a division between Presentational Components and Container Components.

Presentational Components

  1. Are concerned with how things look.

  2. May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.

  3. Often allow containment via this.props.children.

  4. Have no dependencies on the rest of the app, such as redux actions or stores.

  5. Don’t specify how the data is loaded or mutated.

  6. Receive data and callbacks exclusively via props.

  7. Rarely have their own state (when they do, it’s UI state rather than data).

  8. Are written as functional components unless they need state, lifecycle hooks, or performance optimizations.

Container Components

  1. Are concerned with how things work.
  2. May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.
  3. Provide the data and behavior to presentational or other container components.
  4. Call redux actions and provide these as callbacks to the presentational components.
  5. Are often stateful, as they tend to serve as data sources.
  6. Are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.

source post

————————————

Specific answer to your question:

I find it helpful to try and stick with the principles stated above. It makes your code easy to reason about and it helps to separate concerns (Views / Business logic). But, if you find yourself writing spaguetti props to stick to it, or if it doesn’t feel natural in a specific piece of code, just connect your Presentational Component.

Upvotes: 1

Related Questions