CODEWITHSUNDEEP
javascriptreactjsredux
hmlee
hmlee

Reputation: 887

Why does this reducer not trigger a view change using redux?

So I'm building an application in redux and I ran into the problem outlined in the redux documentation where my view would not update after an action was dispatched. The documentation suggests that this happens when you mutate the state. The only problem is, I don't understand how what I was doing is considered a mutation: 

case AppConstants.UPDATE_ALL_TIMERS:
    return action.timers

This, however, does work:

case AppConstants.UPDATE_ALL_TIMERS:
    let newState = state.map((timer, index) => {
        return action.timers[index]
    });
    return newState

How is it that just returning the value of the action as your new state is considered mutating the state? What am I missing?

Below is the entirety of my reducer, the two cases prior to UPDATE_ALL_TIMERS worked just fine. The reducer is being used with combine reducers and is only receiving the timers slice of state, which is an array of objects.

export default function(state = initialState, action) {
    switch(action.type) {
        case AppConstants.ADD_TIMER:
            let newState = [...state, action.timer];
            return newState
        case AppConstants.UPDATE_TIMER:
            newState = state.map((timer, index) => {
                if(index == action.timerID) {
                    const updatedTimer = {
                        ...timer,
                        elapsed: action.elapsed
                    }
                    return updatedTimer
                }
                return timer
            });
            return newState
        case AppConstants.UPDATE_ALL_TIMERS:
            newState = state.map((timer, index) => {
                return action.timers[index]
            });
            return newState
        default:
            return state
    }
}

Upvotes: 0

Views: 447

Answers (1)

Mohamed Mellouki
Mohamed Mellouki

Reputation: 796

Can you post your component ?

Usually when the Store state is alright and well updated yet the component do not re render it's because of deep nested mapped properties.

react-redux do not do deep checks to verify if a value has changed on deep nested mapped objects

Upvotes: 0

Related Questions