title: NgRx Update property of object in array of objects
body: <p>I have an array of objects currently in my store. I want to update a single property of that object given a passed in object.</p>
  
  <p><strong>State</strong></p>
  
  <pre><code>export interface ApplicationState {
    ...
    allNavGroups: INavGroup[] | null;
  }
  </code></pre>
  
  <p><strong>Reducer</strong></p>
  
  <pre><code>  on(ApplicationActions.toggleCollapseNavGroup, (state, group: INavGroup ) =&gt; {
      const navGroup = state.allNavGroups.find( g =&gt; g.groupId === group.groupId);
      navGroup.collapsed = !navGroup.collapsed;
      return { ...state };
    })
  </code></pre>
  
  <p>However, this results in:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot add property collapsed, object is not extensible</p>
  </blockquote>
  
  <p>After seeing <a href="https://github.com/brandonroberts/ngrx-store-freeze/issues/39" rel="noreferrer">this GitHub issue</a>, I tried doing it this way instead, but same issue:</p>
  
  <pre><code>const navGroups = [ ...state.allNavGroups ];
  const navGroup = navGroups.find( g =&gt; g.groupId === group.groupId);
  navGroup.collapsed = !navGroup.collapsed;
  return { ...state, allNavGroups: navGroups };
  </code></pre>
  
  <p>I have seen a few threads on different ways to update an object in an array, but it seems like a lot of code to do a simple thing. In other threads, I saw that you have to <em>replace</em> the object, not <em>update</em> it. When I tried that, it seemed to work. However, that requires more logic to be added to make sure the order of the array is the same as it once was.</p>
  
  <p>Is there a simple way to update just a property on an object within an array of objects that is in the <code>Store</code>?</p>
  
  <p><strong>Update</strong> If I iterate through each object in the array and destructure it, it works. This seems like a hack.</p>
  
  <pre><code>const navGroups = state.allNavGroups.map(g =&gt; ({ ...g }));
  const navGroup = navGroups.find( g =&gt; g.groupId === group.groupId);
  navGroup.collapsed = !navGroup.collapsed;
  return { ...state, allNavGroups: navGroups };
  </code></pre>