تخيل أن لديك مشروع React و Redux يتكون من مكونين ، أحد الوالدين والطفل.

يقوم المكون الرئيسي بتمرير بعض الخاصيات إلى المكون الفرعي. عندما يتلقى المكوِّن الفرعي هذه الخاصيات ، يجب أن يستدعي بعض إجراء Redux الذي يغير بعض الخاصيات التي تم تمريرها من الأصل بشكل غير متزامن.

إليك المكونان:

المكون الرئيسي

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

مكون الطفل

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

و redux-storeيتم تحديثها بشكل صحيح، ولكن عنصر الطفل لا إعادة تقديم.

ليس من مسؤولية Childملء البيانات عادةً . بدلاً من ذلك ، يجب أن يتلقى البيانات التي تم إعدادها بالفعل بواسطة Parent. أيضًا ، يتم تحديث الدعائم تلقائيًا.

ومع ذلك ، قد يكون من المفيد تحديث البيانات من أحد Childالمكونات ومعالجتها ، خاصةً عند مشاركة Redux.

من المحتمل أن تقوم React بإجراء مقارنات ضحلة ، وقد لا تُعيد تصييرها على الرغم من أن الحالة تتغير بشكل واضح.

كحل بديل ، يمكنك القيام بذلك في mapStateToProps:

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