title: What is the best way to break NGXS state into smaller maintainable pieces, but keep them accessible for each other?
body: <p><strong>Brief history of the question:</strong></p>
  
  <p>I'am developing web assistant for <a href="https://en.wikipedia.org/wiki/Mafia_(party_game)" rel="nofollow noreferrer">party game Mafia</a>, so the goal is to store single game in NGXS. Here's <a href="https://gitlab.com/consigliere-app/consigliere-client" rel="nofollow noreferrer">gitlab repo</a></p>
  
  <p>Game contains:</p>
  
  <ol>
  <li>List of players</li>
  <li>List of passed days(from 0 to somewhat about 5(typically))</li>
  </ol>
  
  <p><a href="https://gitlab.com/consigliere-app/consigliere-client/-/blob/master/src/app/shared/models/player.model.ts" rel="nofollow noreferrer">Player model</a></p>
  
  <p>Each day has three phases: Night > Day > Vote</p>
  
  <p><a href="https://gitlab.com/consigliere-app/consigliere-client/-/blob/master/src/app/shared/models/table/day.model.ts" rel="nofollow noreferrer">Day model</a></p>
  
  <p>To maintain this complex day structure and record all players actions I need really big amount of actions, so when <code>GameState</code> started getting huge I tried to break it up into child states. And here I ran into circular dependency issue.</p>
  
  <p>Actually I've managed to solve it somehow, by reading this: <a href="https://github.com/ngxs/store/issues/632" rel="nofollow noreferrer">https://github.com/ngxs/store/issues/632</a></p>
  
  <p>I created <code>CurrentDayState</code> and <code>PlayersState</code> as a child states, but in this case it seems like a bad approach, because this way:</p>
  
  <ul>
  <li>I'am only able to access state directly, and selectors with complex logic still unreachable at this point.</li>
  <li>I'am storing only current day and current vote, and then pushing them into days array in <code>GameState</code>, and it will be hard to implement going back to previous days if game host will need to check some information</li>
  </ul>
  
  <p>I feel like my approach is a bit clunky, and I was unable to come up with any better solution. I could store all actions in root <code>GameState</code>, but this way .ts file will take up about 800 lines and it seems like a bad idea to me.</p>
  
  <hr>
  
  <p><strong>The question:</strong></p>
  
  <p>Is there any way to make NGXS state modular, but let every part of it access selectors from another part without running into circular dependency issue?
  (Reading already meant issue, NGXS sub-states are supposed to be independant from each other and should have no control over each other whatsoever)</p>