Imaginați-vă că aveți un proiect React și Redux cu două componente, un părinte și un copil.

Componenta părinte transmite câteva elemente de recuzită componentei copil. Când componenta copil primește acele recuzită, ar trebui să apeleze la o acțiune Redux care schimbă unele recuzite care au fost transmise de la părinte în mod asincron.

Iată cele două componente:

Componenta părinte

class Parent extends React.Component {
  getChilds(){
    let child = [];
    let i = 0;
    for (let keys in this.props.home.data) {
      child[i] = (
        <Child title={keys} data={this.props.home.data[keys]} key={keys} />
      );
      i++;
      if (i === 6) break;
    }

    return Rows;
  }
  render(){
return (
  <div>
     <h1>I am gonna call my child </h1>
    {this.getChilds()}
 </div>
)

Componenta copil

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 => <GrandSon item={item} />);
  }
  return grandSons;
 }
  render(){
    return (
      <div>
       <h1> I am the child component and I will call my own child </h1>
      {this.getGrandSon()}
    </div>
     )
 }
}

redux-store este actualizat corect, dar componenta copil nu se redă din nou.

În mod normal, nu este responsabilitatea Child pentru a completa datele. În schimb, ar trebui să primească date deja pregătite de Parent. De asemenea, recuzita este actualizată automat.

Totuși, poate fi util să actualizați și să manipulați datele dintr-un Child componentă, mai ales atunci când este implicat Redux.

React este, probabil, efectuează comparații superficiale și s-ar putea să nu se redea, chiar dacă statul se schimbă clar.

Ca soluție, puteți face acest lucru în mapStateToProps:

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