What is this spread statement supposed to do?

Question

I've gotten rusty on Redux, and did not comment my code well. I looked in the console using console.log and I can't figure out what is going on.

I also looked at a cheat sheet here.

I've removed other cases to simplify the concerns.

const Articles = (state, action) => {
  
  console.log('state', state);
  let newState = { ...state };          // here?
  console.log('newState', newState);

  switch(action.type) {
    case "updateArticles":
      newState.articles = action.articles;
      break;
  }
  return newState;
};

https://stackoverflow.com/questions/54605286/what-is-destructuring-assignment-and-its-uses — epascarello, Nov 19 '20 at 03:14

score 1 · Answer 1 · answered Nov 19 '20 at 03:14

1

This statement let newState = { ...state }; will clone the object into a new one. This is helpful to make sure you don't manipulate the old one by just doing let newState = state; and just passing the reference.

answered Nov 19 '20 at 03:14

Dominik

6,078
8
37
61

score 1 · Answer 2 · answered Nov 19 '20 at 03:15

1

In React (and redux), state should never be mutated, because React uses Object.is to determine whether a stateful value has changed (and if it doesn't detect a change, re-rendering will be skipped).

What you have there isn't destructuring, but spread syntax - you're creating a shallow copy of the state object and putting the copy into a variable named newState. This means that setting the new state to newState will result in re-rendering.

If you had mutated the old state instead by using the state variable instead of a new newState variable, you might well have not seen a re-render.

answered Nov 19 '20 at 03:15

CertainPerformance

356,069
52
309
320

See https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log - you're populating it afterwards – CertainPerformance Nov 19 '20 at 03:27
I don't like it. I'd clone inside the cases when necessary instead. – CertainPerformance Nov 19 '20 at 03:29
It's not that it's not efficient (though I guess it's not), it's that it's not a very pure approach - better to create and return a new object only when you *need* to return a new object, rather than create one in advance and mutate it. – CertainPerformance Nov 19 '20 at 03:40
I saw the unaccept, was there something that's still confusing you? – CertainPerformance Nov 24 '20 at 15:26

What is this spread statement supposed to do?

2 Answers2