title: Updating an object in the ngrx/store
body: <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>