title: Store pattern for game state in angular
body: <p>I'm working on a web game built in Angular, using WebSockets to communicate to the backend. So far I've decided that the clients send &quot;events&quot; as needed, and the server sends back the &quot;state&quot;, 10 times a second or so.</p>
  <p>On the client side, this is handled by a ConnectionService that components can consume. This service exposes a &quot;sendEvent&quot; method and a gameState object which is updated at 10hz or so.</p>
  <p>This has worked fairly well - but as the state tree from the server grows, I'm wondering how to handle this data in a scalable way. Here are some concerns/use cases I'd like to be able to solve:</p>
  <ol>
  <li><p>Not rerender everything 10 times a second. Currently I do a naive &quot;this.gameState = newState&quot;. I can probably do a deep iteration on keys and mutate the state instead? Is that wise?</p>
  </li>
  <li><p>Make it easier to say &quot;when gameState.pilot.switches[5] changes, do X&quot;. I'd love to be able to listen to a subset of state changes.</p>
  </li>
  </ol>
  <p>Is rxjs what I need here?</p>