Using the ... operator on objects

Question

I can't figure out how to go one level deeper with the spread operator. I'm using Redux and I have this user state:

const INITIAL_STATE = {
    token: null,
    progress: {
        hasSeenTutorial: false,
        hasSignedUp: false
    },
    information: {
        fullname: null,
        username: null,
        phone: null,
        verificationCode: null
    }
}

And I'm trying to change hasSeenTutorial to true using the spread operator in my action:

case 'UPDATE_TUTORIAL_SEEN':
            return {...state, hasSeenTutorial: action.payload}

But this adds a new hasSeenTutorial onto the end of my object, so obviously I want to use something like this:

case 'UPDATE_TUTORIAL_SEEN':
            return {...state, progress.hasSeenTutorial: action.payload}

Note the added progress.

But this is not how you access it properly - it throws an error, what is the correct way?

NOTE: The key is to also not modify hasSignedUp - I want to only access and modify hasSeenTutorial using the spread operator.

EDIT: This question is unique - I'd like to know how to do it using only the spread syntax ... and not using Object.create or Object.assign - if I used those I probably would not be mixing in ... at the same time.

Possible duplicate of [Object.assign—override nested property](http://stackoverflow.com/questions/41588068/object-assign-override-nested-property) — philipp, Mar 30 '17 at 18:55
@philipp it's something *like* an operator, but it's not part of the Expression grammar. It's a syntactic element like `{` or `;` . — Pointy, Mar 30 '17 at 19:03
@philipp: Could you please show me where ECMAScript describes this as an operator and not just a part of composite literal or formal paramater declaration syntax? I'm unable to locate it. — , Mar 30 '17 at 19:03
@squint the `...` is the spread operator. The use of ... in a way like in the example here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator is the spread syntax, I think. It's also in the URL. — ARMATAV, Mar 30 '17 at 19:04
@ARMATAV MDN is a Wiki and this is a good example of why collaborative wikis need constant monitoring and improvement :) If you look through [the actual spec](http://www.ecma-international.org/ecma-262/6.0) it's never referred to as an "Operator". — Pointy, Mar 30 '17 at 19:06
@Pointy oops, though those were like the official javascript docs - they're the first result when it comes to anything — ARMATAV, Mar 30 '17 at 19:08
@squint Good Point! Searching for »spread operator« and »spread syntax« yields the same results for me. I could not find anything that said: »it's these or this«, probably we are both right, or wrong… — philipp, Mar 30 '17 at 19:12
@philipp: It's really just like how a `x = [a, b, c]` uses commas, but that isn't a comma operator *(though there is such an operator)*. The `...` is part of the [language grammar](http://www.ecma-international.org/ecma-262/6.0/#sec-punctuators) that denotes a behavior based on where it's used. I did see that MDN includes it in its [operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators), but then MDN is often wrong, so I only did a quick search of the spec and found uses as the punctuator but nothing relating to an operator. — , Mar 30 '17 at 19:22

score 2 · Accepted Answer · answered Mar 30 '17 at 18:57

2

case 'UPDATE_TUTORIAL_SEEN':
  return {
    ...state,
    progress: {
      ...state.progress,
      hasSeenTutorial: action.payload
    }
  };

answered Mar 30 '17 at 18:57

chandlervdw

3,197
4
19
21

Fails in this demo: https://jsfiddle.net/ase8t3Lc/ Don't know if it's an implementation issue though. – Mar 30 '17 at 19:02
It works for me and is exactly what I was looking for - will accept when timer is up - thanks a lot, @chandlervdw – ARMATAV Mar 30 '17 at 19:02
I see now that this is part of the ES Next, and most current releases don't yet support it, at least not without flags. Would be a good thing to note for people who try to use it. – Mar 30 '17 at 19:30

Using the ... operator on objects

1 Answers1