title: Wait for ngrx state to be populated in async route guard
body: <p>My route guard needs to wait for state to be populated, but I'm only ever getting the first value, which is of course, <code>null</code></p>
  
  <pre><code>export class Guard implements CanActivate {
  
    constructor(
      private router: Router,
      private store: Store&lt;AppState&gt;,
    ) {}
  
    canActivate(): Observable&lt;boolean&gt; {
      return this.store.select&lt;MyState&gt;('mystate').map(state =&gt; {
        if (state &amp;&amp; state.thing) {
          this.router.navigate(['/path']);
          return true;
        }
      });
    }
  
  }
  </code></pre>
  
  <p>How can I force the guard to wait for the state to be populated?</p>
  
  <hr>
  
  <h1>[update 1]</h1>
  
  <p>If I employ the <code>.skipWhile()</code> pattern:</p>
  
  <pre><code>return this.store
             .select&lt;MyState&gt;('mystate')
             .skipWhile(mystate =&gt; {
               if (mystate &amp;&amp; mystate.thing) {
                 return false;
               }
  
               console.log('here');
  
               return true; // &lt;- shouldn't this cause it to keep going?
             })
             .do(mystate =&gt; {
               if (mystate.thing.condition) {
                 this.router.navigate(['/path']);
               }
             })
             .mapTo(true);
  </code></pre>
  
  <p><code>.do(...)</code> is never evaluated, and <code>'here'</code> is only logged once. What am I missing?</p>
  
  <hr>
  
  <h1>[update 2]</h1>
  
  <p>What was missing was the call to <code>.dispatch()</code> to load my state in the first place. I have a nested module structure, and the container component this guard was placed on was where <code>.dispatch()</code> lived. Of course, the guard, prevented the component from initializing, and therefore my state was never populated.</p>