How to properly work with props with a large nesting of components?

V

Vadim2017-06-26 19:43:34

React

Vadim, 2017-06-26 19:43:34

Good afternoon.
If our application has a sufficiently large nesting, for example 10.
And json with data for all components came to the main APP component.
How to correctly distribute data in props to various components in the system?
For myself, I see either pulling out separate parts of json and throwing them in parts, or throwing all props for all components at once.
Example:
Send all data to App.
It is necessary to scatter this data throughout the application.
If, for example, props are forwarded right up to SubComponent1, then there will be a lot of manipulations.
And in case you need to add a new field to SubComponent1, you will need to drop the new element down again.
PS: Only React is used, no Flux/Redux. It will not work to split the receipt of data into several requests, all data with the state of the entire application comes in 1 request.
PS: Maybe someone has come across good articles describing how to properly work with props in react,

<App>
  <Header/>
  <Body>
    <Compoment1>
      <SubComponent1 />
      <SubComponent2 />
      <SubComponent3 />
    </Compoment1>
    <Compoment2>
      <SubComponent1 /> //Сюда хочу пробросить props.
      <SubComponent2 />
      <SubComponent3 />
    </Compoment2>
    <Compoment3>
      <SubComponent1  />
      <SubComponent2 />
      <SubComponent3 />
    </Compoment3>
  </Body>
  <Footer />
</App>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

O

Oleg Gamega, 2017-06-26
@gadfi

1. The classic redux architecture is divided into smart and stupid components, but this does not mean that you need to save the number of connect functions, otherwise components easily appear that need to be passed 20 properties ...
2. read about context ( you don’t need to use context instead of redux! but know about him useful)

V

Vitaly, 2017-06-26
@vshvydky

I ran into a similar dilemma, I decided that there is no place for reduxconnect in a stupid component, because the callback on linkState gets there