CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Uchit Kumar
Uchit Kumar

Reputation: 687

change in props not causing re-render in react - redux app

I have a react -redux app. It is working fine. But when props in one particular component updated using calling props.dispatch(), other component which is using this props is not re-rendering. I think redux is not able to identify changes in that particular prop. object is 

[
   {lunch: 0, dinner: 12, breakfast: 0},
   {lunch: 1, dinner: 2, breakfast: 0}, 
   {lunch: 0, dinner: 12, breakfast: 10}
]

and this change to something like this

[
   {lunch: 0, dinner: 1, breakfast: 0},
   {lunch: 1, dinner: 2, breakfast: 0}, 
   {lunch: 0, dinner: 1, breakfast: 10}
]

So there are just slight changes in the object. But then this should cause re-rendering in components which are using this prop. But this is not the case. I have checked in the reducer, the object is changing there. Re-render is also called for changes in other props. Only in case of this object. it is not re-rendering. Any suggestions? Edit:- in component- 

this.props.dispatch({type: actions.SAVE_SELECTED_MEAL, selectedMeal: selected});

in reducer --

case actions.SAVE_SELECTED_MEAL: return { ...state, selectedMeal: action.selectedMeal // [{lunch: id, dinner: 12, breakfast: 0}] }

Upvotes: 2

Views: 881

Answers (1)

Uchit Kumar
Uchit Kumar

Reputation: 687

I found answer in this redux issue https://github.com/reactjs/redux/issues/585 In case someone gets into a similar issue. Actually, I was mutating object in my component I changed code from const selected = this.state.selectedMeal; to const selected = {...this.state.selectedMeal}; Now its working fine.

Upvotes: 2

Related Questions