Updating an object in the ngrx/store
<p>I'm using @ngrx/store for an Angular 2 app.</p>

<p>My store holds a list of say, <code>Book</code> objects.  I want to update a field in one of those objects.  I also happen to have an Observable of the Book instance I'm looking to update (say, <code>selectedBook</code>).</p>

<p>To do the update I intend on calling the reducer with an <code>UpdateBookAction</code>, and a payload of the new Book.  So I make a deep copy of the existing Book object by subscribing to <code>selectedBook</code> and then calling Object.assign().</p>

<p>But when I try to write to one of the fields of the copy I get the following error. (It happens to be the same error I get if I were to try to write directly to the Book object in the store.)</p>

<p><strong>Error</strong></p>

<pre><code>Cannot assign to read only property 'name' of object '#&lt;Object&gt;' at ViewWrappedError.BaseError [as constructor]
</code></pre>

<p><strong>Code</strong></p>

<pre><code>ngOnInit() {
    this.book$ = this.store.let(fromRoot.getSelectedBook);
    //...
}

someFunction() {
    //...
    this.book$.subscribe(book =&gt; {

        let updatedBook = Object.assign({}, book);
        updatedBook.name = 'something else';          // &lt;--- THIS IS WHAT THROWS

        let action = new BookUpdateAction(updatedBook);
        this.store.dispatch(action);

    }
}
</code></pre>

<p><strong>Clarification after Comments</strong></p>

<p>I was under the assumption that I could have an action with a payload that was not the entire state of the store.  (In fact that seems necessary, no?)  I'm confident that this is the case given the documentation.</p>

<p>The action I'm looking to take is something like this:</p>

<pre><code>Action = UPDATE, payload = {'id': 1234, 'name': 'something new'}
</code></pre>

<p>As mentioned, I intend on making that call like this: </p>

<pre><code>this.store.dispatch(action);
</code></pre>

<p>Presumably under the hood, ngrx is passing my action to the reducer along with the (immutable) current state.</p>

<p>So from there, everything should work okay.  My logic inside the reducer doesn't mutate the existing state, it simply creates a new one out of the existing state and the payload I've passed in.</p>

<p>The real question here is how I can reasonably build the new "objectToUpdate" such that I can pass that in as the payload.</p>

<p>I could do something like this:</p>

<pre><code>this.book$.subscribe(book =&gt; {

    let updatedBook = new Book();
    updatedBook.id = book.id;
    //set all other fields manually...
    updatedBook.name = 'something else';

    let action = new BookUpdateAction(updatedBook);
    this.store.dispatch(action);

}
</code></pre>

<p>But we're not just talking about two fields here... what if my book has several fields?  Do I have to manually build from scratch a new Book each time just to update one field?</p>

<p>My solution was to do a deep copy using <code>Object.assign({}, book)</code> (and not mutate the old one!) and subsequently make the update to solely the field I was looking to touch.</p>