Imagine que você tem um projeto React e Redux com dois componentes, um pai e um filho.

O componente pai passa alguns adereços para o componente filho. Quando o componente filho recebe esses props, ele deve chamar alguma ação Redux que altera alguns dos props que foram passados ​​do pai de forma assíncrona.

Aqui estão os dois componentes:

Componente Pai

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 Criança

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()} ) } }

O redux-storeé atualizado corretamente, mas o componente filho não é renderizado novamente.

Normalmente não é responsabilidade do Childpreencher os dados. Em vez disso, ele deve receber dados que já foram preparados pelo Parent. Além disso, os adereços são atualizados automaticamente.

Ainda assim, pode ser útil atualizar e manipular dados de um Childcomponente, especialmente quando Redux está envolvido.

O React provavelmente realiza comparações superficiais e pode não ser renderizado novamente, embora o estado esteja claramente mudando.

Como alternativa, você pode fazer isso em mapStateToProps:

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