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-store
actualiza correctamente, pero el componente secundario no se vuelve a procesar.
Normalmente no es responsabilidad del Child
rellenar 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 Child
componente, 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 } }