Property doesn't update after firing redux dispatch - reactjs

Question

After hours I have to ask for help, my useEffect doesn't always work on reduxs dispatching action.
const ScreenA = { currentItem, updatedItem } => {
useEffect(() => {
if (currentItem.id === updatedItem.id) { // Do stuff }
}, [updatedItem]) // XX Is not changing
... // do stuf
const mapStateToProps = (state) => {
console.log("AAABB ScreenA.mapStateToProps updatedItem: ", state.updatedItem) // XX I receive new updated id!! but it doesn't change the prop.updatedItem for ScreenA and useEffect is not calling.
return {
updatedItem: state.updatedItem,
}
}
export default connect(mapStateToProps)(FeedScreen)
}
My Reducer
Update
const initialState = {
updatedItem: undefined,
}
export default (state = initialState, action) => {
switch (action.type) {
case ITEM_CHANGED:
console.log("AAABB reducer.addChangedItem.ITEM_CHANGED: " + action.t) // Is printing after every dispatch call
return {
...state,
updatedItem: action.updatedItem,
}
// I tried also with
return {
updatedItem: action.updatedItem,
}
default:
return state
}
}
Strange was that it works if I dispatch change action from ScreenB to ScreenA but not between ScreenC to ScreenA. (It was the same way how I dispatch the action.

Answer 1

Spread out your updated item as well
Since your updated item is an object perhaps that causes a mutation. Seems unlikely but this are the issues you face when not using flat data. also generally you have a type and a payload (not updated item) on your action in redux.
return {
...state,
updatedItem: {...action.updatedItem},
}
If this doesn't work then probably something in your useEffect is broken, you need to log inside there and show results.