La pregunta tiene un poco de ambigüedad, ya que mencionas dos aspectos de diseño diferentes aunque se relacionan en determinado punto, en primer lugar mencionas que hasta que nivel de profundidad pasas los props a travez de los componentes y por otro lado mencionas el como manejar el estado global de la aplicación con Redux/Flux.
La primera tiene que ver con la gestión de los datos dentro de un componente React con respecto al state y el props (haciendo a un lado Redux/Flux ya que ese es otro aspecto), en este primer aspecto hay dos reglas esenciales que debes tomar siempre en cuenta en un componente React (Vista).
- El props solo puede ser mutado desde un componente de nivel superior, para un componente sus props (this.props) son inmutables, es decir el componente no puede mutar sus propias propiedades, solo puede hacerlo un componente externo.
- El state solo es accesible dentro del propio componente es decir a diferencia de las propiedades el state no es accesible por los componentes externos, así mismo a diferencia del props el state es mutable y solo puede ser mutado dentro del componente.
En base a estas dos consideraciones recién podemos abordar el tema de composición, recuerda que en React se utiliza composición en lugar de herencia para crear las interfaces.
Siempre utilizas el props cuando quieres comunicar cambios a componentes inferiores en la jerarquía y el state lo utilizas internamente en el componente para gestionar su estado.
En composición una practica común y muy recomendada es la de definir componentes tontos (Dumb Components), estos componentes no tienen state, solamente solamente residen en sus props por lo cual son dependientes al 100% del componente superior, eso los convierte en componentes tontos.
Antes de pasar a ejemplos con código, hablemos del segundo aspecto -> el estado global de la aplicación.
Tanto Flux como Redux ofrecen la misma arquitectura Event Driven, una arquitectura circular que impone un esquema de comunicación siempre unidireccional entre la vista, store y actions.
Aquí la interacción que interesa para tu inquietud es la interacción de la Vista (React) con el Store, el Store se comunica con la vista en el caso de Flux por medio de callbacks y en el caso de Redux por medio de eventos esta diferencia en la comunicación es irrelevante, lo esencial es que el Store sirve como un repositorio Global del estado de tu aplicación, como gestionas este estado global para representarlo en los componentes individuales en la vita? es ligando el state del componente individual con el estado del Store global.
Entonces de aquí propongo esta regla utilizar el estado Global de la aplciación para mutar el estado de componentes individuales y el props utilizas para comunicación entre componentes.
Como en este ejemplo (ES6/Flux)
export default class LoginComponent extends React.Component {
render() {
return(
<div>
{this.props.sesion ? this.props.sesion.nombreusuario : 'Debes iniciar sesion!'}
</div>
)
}
}
export default class MenubarComponent extends React.Component {
componentWillMount(){
SesionStore.addSesionChangeListener(this._onSesionChange);
}
render() {
return(
<div>
<div>item 1</div>
<div>item 2</div>
<LoginComponent sesion={this.state.sesion}/>
</div>
)
}
_onSesionChange = () => {
let sesion = SesionStore.getSesion();
this.setState(update(
this.state,
{
sesion: {$set: sesion}
}
))
}
}
En este ejemplo la sesión naturalmente debe ser global en la aplicación por lo tanto es almacenada en el Store, el componente tonto es LoginComponent y el componente principal es MenubarComponent. LoginComponent debe mostrar el usuario logeado pero al ser un componente tonto solo puede residir en sus props para mostrar el usuario logeado por lo tanto debe ser el componente superior quien le comunique el cambio de sesión cuando el usuario se logee, en tu diseño siempre debes tratar de reducir en lo posible las fuentes de la verdad, en este caso la fuente de la verdad en la vista es el state del componente superior MenubarComponent. MenubarComponent no es un componente tonto y es el que se enlaza directamente con el store para mutar su estado cuando el SesionStore le comunica un cambio en la sesión.
En este diseño los componentes tontos siempre son componentes muy concretos y re utilizables, no debes agregar componentes inteligentes dentro de ellos pero si puedes seguir anidando mas componentes tontos en niveles inferiores de la jerarquía de un componente tonto.
Ahora que pasa si un componente en la vista quiere comunicar un cambio a un componente que esta varios niveles inferiores en la jerarquía? una alternativa que existe es utilizar el context, pero incluso facebook te advierte que no es recomendable hacer esto, con un buen diseño y re utilización de componentes no vas a requerir usar el context para comunicaciones de este estilo.