Use Conectar o pasar datos como accesorios para niños

Soy nuevo en reactjsr y reducir. Tengo un escenario donde hay componentes nesteds como este.

A> B> C> D

Hay una propiedad utilizada en el componente A y se usará en el componente D. Entonces, tengo dos enfoques:

  1. Obtenga estado de redux store en el componente A y luego páselo como accesorios a todos sus componentes secundarios aunque se use solo en el componente D.
  2. Debería conectarme a redux store en el componente D y buscar esa propiedad desde allí.

¿Cuál es el enfoque correcto?

Como dice Dan Abramov, autor de redux en este número

Ambos enfoques para pasar accesorios a los niños o conectarlos a la tienda son apropiados, sin embargo, tener componentes connect() nesteds realmente le dará más rendimiento. El inconveniente es que están un poco más acoplados a la aplicación y un poco más difíciles de probar, pero eso puede no ser un gran problema.

También ha articulado una buena regla general para seguir en reddit

Lo hago de esta manera:

  • Comience usando un contenedor y varios componentes de presentación
  • A medida que el árbol de componentes de presentación crece, los componentes “medios” comienzan a pasar demasiados puntales hacia abajo
  • En este punto, envuelvo algunos componentes de hoja en contenedores para que los componentes “intermedios” no necesiten aceptar y pasar accesorios que no están relacionados con ellos.
  • Repetir

Incluso ha tuiteado sobre esto:

Intenta mantener tus componentes de presentación separados. Cree los componentes del contenedor conectándolos cuando sea conveniente. Siempre que sienta que está duplicando el código en los componentes principales para proporcionar datos para el mismo tipo de hijos, es hora de extraer un contenedor.

Entonces en palabras simples:

Puede usar connect() en cualquier nivel. Hacerlo hace que el componente sea inteligente, ya que sabe de dónde provienen sus accesorios. Un componente tonto solo tiene accesorios, y podrían venir de cualquier parte. Un componente inteligente está acoplado a redux; un componente tonto no lo es.

Sugeriría que, si ya está utilizando redux en su aplicación, establezca la propiedad en el almacén redux y la busque en el componente D.

Pero si el flujo de trabajo es realmente simple y todos los datos se obtienen de una única fuente por vista, puede evitar la reducción como lo hace para la administración compleja del estado.