JavaScript strange behavour on object assignment

Question

I am currently writing a Redux reducer and I am facing an issue with the state update.

The code bellow is supposed to toggle an open state. The problem is that the resulting state does not return the same value depending on how one accesses it.

case actionTypes.toggle: {
         let newState = {...state}
         newState.questions[action.questionNumber].open = !state.questions[action.questionNumber].open
         console.log("newState open", newState.questions[action.questionNumber].open)
         console.log("question number", action.questionNumber)
         console.log("new state questions", newState.questions)
         console.log("new state", newState)
         return newState
       }

The strange part is that the console output reads:

newState open true
question number 0
new state questions [list of questions with questions[0].open == true]
new state [contains a list of questions with questions[0].open == false]

In short the final newState does not contain the updated questions[0] while newState.questions[0] does.

To make it even more confusing one can replace line 3 with:

newState.questions[action.questionNumber].open = true

and now everything works as expected.

I am completely lost on how such a behavior can even be triggered. Any hint to solve the problem is appreciated.

Thank you in advance.

try logging with JSON.stringify(newState) and JSON.stringify(newState.questions). The reason being that console.log shows you the *live* state of the object, so you may be seeing an artifact of when you view the object. That said, you should not mutate the array, you should copy it, then change the value at the index in question. — see sharper, Aug 05 '21 at 01:25

score 2 · Answer 1 · answered Aug 05 '21 at 01:23

2

You unfortunately are not treating state as immutable. This line...

newState.questions[action.questionNumber]

references the same array and object within it as what exists in the original state. This...

let newState = {...state}

only creates a shallow copy.

My advice would be to use something like this

// break the reference to the "questions" array
const questions = [...state.questions]
const question = questions[action.questionNumber]

// Remove the selected index and replace with a new value
questions.splice(action.questionNumber, 1, {
  ...question,
  open: !question.open
})

return {
  ...state,
  questions
}

answered Aug 05 '21 at 01:23

Phil

157,677
23
242
245

They're clearly not updating state idiomatically, but does that explain what they're seeing. I think something else is going on there – rubixibuc Aug 05 '21 at 02:12
1

@rubixibuc my guess is something else outside the reducer is mutating state. As has been pointed out as well, `console` is a terrible point-in-time debugging tool due to its live updating so OP could just be confused by the logger output while dispatching the same action multiple times – Phil Aug 05 '21 at 02:14

score 1 · Answer 2 · answered Aug 05 '21 at 01:55

@Phil has a great answer.

But just to add (since not suitable as comment), you can use ES6 too to map the results.

//Rebuild the array
const questions = state.questions.map((q,i) => {
  if(i === action.questionNumber) {
     return {...q, open:!q.open};
  } else {
     return q;
  }
})

//can be written as questions or questions:questions
return {
  ...state,
  questions: questions
}

JavaScript strange behavour on object assignment

2 Answers2