title: Components re-render when state changes even if the actual values are the same
body: <p>My <strong>ngrx</strong> state contains an array of items:</p>
  
  <pre><code>export interface MyState {
      myItems: ItemType[];
  }
  </code></pre>
  
  <p>I have  a component that contains <strong>ngFor</strong> with an async pipe.</p>
  
  <p><em>markup</em>:</p>
  
  <pre><code>&lt;app-my-item-details-card *ngFor="let myItem of myItems$ | async"&gt; &lt;/app-my-item-details-card&gt;
  </code></pre>
  
  <p><em>selector</em>:</p>
  
  <pre><code>this.myItems$ = createSelector(getMyState, state =&gt; state.myItems);
  </code></pre>
  
  <hr>
  
  <p>Inside of the AppMyItemDetailsCardComponent I have a boolean flag <strong>displayDetails:boolean</strong> and button <strong>button (click)="displayDetails = !displayDetails"</strong>  that toggles boolean flag. On the details panel I have some inputs that displays some data from <strong>MyItem</strong> instance that is passed to the component. User can modify those html elements and click <strong>Save</strong> button, that fires of an action <strong>MyItemUpdateAction</strong>. In the store reducer I do something like this:</p>
  
  <pre><code>const myItemToModifyIndex = state.myItems.findIndex(...predicated based on the passed a ction...)
  // cloning the item that I need to modify.
  const myItemClone = [...state.myItems[myItemToModifyIndex]];
  // modifying properties on the cloned item using data from the action
  myItemClone.interestingProperty = action.newValueFromUser;
  // cloning the array of items from the state.
  const myItemsArrayClone = [...state.myItems];
  // setting new item in the cloned array.
  myItemsArrayClone[myItemToModifyIndex] = myItemClone;
  // return of new state.
  return { myItems: myItemsArrayClone }
  </code></pre>
  
  <hr>
  
  <p><strong>Problem:</strong></p>
  
  <p>Because as you can see from the reducer that I have modified the state and essentially created a new instances of the <strong>myItems</strong> array and a copy of the item that I have modified, <strong>Angular</strong> <strong>async</strong> pipe reacts to the change in the store and re-renders my list of components. Which in itself re-renders all instances of <strong>AppMyItemDetailsCardComponent</strong> and it causes the flag that displays details of the component to false and UI changes and details panel is hidden.</p>
  
  <p><strong>Questions:</strong></p>
  
  <p>1) Does this pattern make sense and fits in with how things are done with NGRX? (I am new to redux in angular).</p>
  
  <p>2) I can resolve this by keeping the flag that displays the details panel inside of the store. Basically instead of toggling <strong>button (click)="displayDetails = !displayDetails"</strong> a boolean flag, I would dispatch an action that would change a flag on an instance of MyItem itself that would drive the display of the details panel. Can this be considered a good solution?</p>