How this de-sructuring syntax of array updating state in react.js

Question

I was going through a react.js code where I encountered de-structuring array syntax really confusing.

I commented on author's post, but didn't got any response.

case Actions.AC_UPDATE_TASK:
  item = action.payload.item;
  props = action.payload.props;
  item.start = props.start ? props.start : item.start;
  item.end = props.end ? props.end : item.end;
  item.name = props.name ? props.name : item.name;
  return {
    data: [...state.data],
    links: [...state.links],
    selectedItem: state.selectedItem
  };

Here item and props are coming as parameter,item is present there in data array. After manipulating item from props this item needs to be updated in data array but here its not updated in data array after manipulating it. But after destructuring syntax I can see the updated item in data array. How is this possible?

In isolation, that block of code is doing very little - the return value just contains the existing state data, with the exception of new array references. The code that we can't see is what's doing the work. I assume this is a case statement from a redux-style reducer? — Adam Jenkins, May 01 '19 at 13:47
But the item which we are manipulating before return statement is not updated in the data array which is there in state. Here the author only de-structure's it and I can see the updated item there in the next state — Deepankar Singh, May 01 '19 at 13:50
Simply, the manipulated item should have been updated in state.data array either through finding index of particular item and pushing it in the same index or by any other means. But here only de-structuring is done and I can see the updated item in data array in next state — Deepankar Singh, May 01 '19 at 13:54
From my original comment: `The code that we can't see is what's doing the work`. Maybe the author of this code does something crazy like manipulates `state.data` somewhere else in the reducer before the switch, we don't know. But nothing of interest happens in this code block. EDIT: Destructuring has **nothing** to do with this. — Adam Jenkins, May 01 '19 at 14:17
(BTW, this is [Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), not [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)) — adiga, May 01 '19 at 16:22
Here is the complete code https://codesandbox.io/s/613vkoq8nr — Deepankar Singh, May 02 '19 at 04:49
Thanks a lot @Adam you were right that `The code that we can't see is what's doing the work`.After putting debugger points I found that It first goes to Select action where item is set in the state.data array and nothing is done in this update action. But still I have a doubt that if state is not updated why using de-structuring or spread syntax, simply return the state as it is. — Deepankar Singh, May 02 '19 at 04:59
Can you go through the code and tell whether I'm right or wrong because sometimes it's get selected and sometimes not. — Deepankar Singh, May 02 '19 at 05:17
You need to show the action code, actually you need to show all relevant code. If `state` was mutated directly anywhere, it's a mistake. — Adam Jenkins, May 02 '19 at 11:14

score 0 · Answer 1 · edited May 01 '19 at 16:36

It's not a react nor destructuring related effect - it's just a result of direct mutations.

In this place you're copying a reference to an object:

item = action.payload.item;

Changes/mutations are not done on a local copy but on passed object (by reference).

Probably (99,99%) the same reference is used in the state.data object/array - this way 'theoretically local' mutation affects state 'behind the scene'.

It can look like unreadable but there is no magic - javascript just works this way.

If direct mutation is not desired - you can avoid this kind of side effect using one of immutable techniques. In the simplest case always operate on a newly created object and copy (deep clone) properties.

How this de-sructuring syntax of array updating state in react.js

1 Answers1