Imagina que tienes un proyecto de React y Redux con dos componentes, un padre y un hijo.

El componente padre pasa algunos accesorios al componente hijo. Cuando el componente hijo recibe esos accesorios, debe llamar a alguna acción de Redux que cambie algunos de los accesorios que se pasaron del padre de forma asincrónica.

Estos son los dos componentes:

Componente principal

class Parent extends React.Component { getChilds(){ let child = []; let i = 0; for (let keys in this.props.home.data) { child[i] = (  ); i++; if (i === 6) break; } return Rows; } render(){ return ( 
I am gonna call my child 
 {this.getChilds()} )

Componente hijo

class Child extends React.Component { componentDidMount(){ if(this.props.data.items.length === 0){ // calling an action to fill this.props.data.items array with data this.props.getData(this.props.data.id); } } getGrandSon(){ let grandSons = []; if(this.props.data.items.length > 0){ grandSons = this.props.data.items.map( item => ); } return grandSons; } render(){ return ( 
 I am the child component and I will call my own child 
 {this.getGrandSon()} ) } }

Se redux-storeactualiza correctamente, pero el componente secundario no se vuelve a procesar.

Normalmente no es responsabilidad del Childrellenar los datos. En su lugar, debería recibir datos que ya han sido preparados por Parent. Además, los accesorios se actualizan automáticamente.

Aún así, puede ser útil actualizar y manipular datos de un Childcomponente, especialmente cuando se trata de Redux.

React probablemente realiza comparaciones superficiales y es posible que no se vuelva a generar aunque el estado esté cambiando claramente.

Como solución alternativa, puede hacer esto en mapStateToProps:

const mapStateToProps = state => { return { id: state.data.id, items: state.data.items } }