My issue is that my redux state is updating (I can see it in the redux dev tool) but my component is not updating, it's not putting the last value of my array initialState.userWeight
Here is what my reducer looks like :
case 'NEWWEIGHT':
const weight = action.payload.weight
const date = action.payload.date
state.userWeight = [...state.userWeight, {weight: weight, date: date}]
return {...state}
Here is my initialState :
const initialState = {
userName: '',
userSize: 0,
userWeight: [],
userDate: '',
}
Here is what my component looks like :
const userWeightRedux = useSelector(state => state.userInfo.userWeight[Array.length - 1].weight)
console.log(userWeightRedux)
...
<Text style={styles.user}>{userWeightRedux}</Text>
So console.log(userWeightRedux) dosen't change.
I am new to react, redux and don't fully understand the spread syntax, maybe the problem is here but did'nt find anything, hope you can help me :).
Array.length is a prototype property of Arrays. You can't use it that way. By default is always 1. So you are retrieving always the first element of state.userInfo.userWeight. Use instead:
const userWeightRedux = useSelector(state => state.userInfo.userWeight[state.userInfo.userWeight.length - 1].weight)
or a more gentle sintax:
const userWeightRedux = useSelector(state => state.userInfo.userWeight.slice(-1)[0].weight)
Although other answers better address your specific problem...
You're mutating your state. Although you're returning a new state object, you're leaving your old state in a mess. This will cause subtle problems. Don't mutate anything in a reducer. So...
// this line mutates the "outgoing" state
state.userWeight = [...state.userWeight, {weight: weight, date: date}]
return {...state}
should be rewritten as:
return {...state, userWeight: [...state.userWeight, {weight: weight, date: date}]}