title: i can't read my state once i load my component, state is properly changing
body: <p>i'm currently trying to understand how NGXS works, so i was able to setup the state and action but when i call my service and i try to put the state into a variable i get an observable.</p>
  
  <p>attached is the code and what i get from the console, i'm trying to get a list of items when my application starts so basically i have 2 states the clients array which will store the response from the service and a loading state which will change to false if i get a response, this is the first time i'm trying to handle this concepts so thanks in advance for the help</p>
  
  <pre><code>  import { State, Action, StateContext, Selector } from "@ngxs/store";
    import { Client } from "../models/client-model";
    import { GetAllClients } from "../actions/client.actions";
    import { ClientService } from "../services/client.service";
    import { tap } from 'rxjs/operators';
  
    export class ClientStateModel {
      clients: Client[];
      loading: boolean;
    }
  
    @State&lt;ClientStateModel&gt;({
      name: "clients",
      defaults: {
        clients: [],
        loading: true
      }
    })
    export class ClientState {
      constructor(private _clientService: ClientService) {}
  
      @Action(GetAllClients)
      getClients(ctx: StateContext&lt;ClientStateModel&gt;, action: GetAllClients){
        return this._clientService.getClients().pipe(tap(clientsList =&gt; {
          const state = ctx.getState();
          ctx.setState({
            ...state,
            clients: clientsList,
            loading: false
          });
        }))
      }
    }
  </code></pre>
  
  <p>this is the service</p>
  
  <pre><code>  import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { environment } from '../../environments/environment';
  
    @Injectable()
    export class ClientService {
      public url: string;
  
      constructor(
        private _http: HttpClient
      ) {
        this.url = environment.apiURL;
      }
  
      getClients(): Observable&lt;any&gt; {
        const headers = new HttpHeaders({'Content-Type': 'application/json'});
        return this._http.get(`${this.url}get-clients`,{headers: headers});
      }
    }
  </code></pre>
  
  <p>and this will be my attempt to consume the state</p>
  
  <pre><code>  import { Component, OnInit } from "@angular/core";
    import { Client } from "./models/client-model";
    import { Router } from "@angular/router";
    import { Store } from "@ngxs/store";
    import { GetAllClients } from "./actions/client.actions";
    import { Observable } from "rxjs";
  
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      title = "Managed Services Dashboard";
      Clients: Observable&lt;Client&gt;;
      isLoading;
  
      constructor(private store: Store, private _router: Router) {}
  
      ngOnInit(): void {
        this.getClients();
      }
  
      getClients() {
        this.store.dispatch(new GetAllClients()).subscribe(result =&gt; {
          this.Clients = this.store.select(state =&gt; state.clients.clients);
        })
      }
  
      goToSelectedClient(client) {
        console.log(client);
        this._router.navigate(["client-details"]);
      }
    }
  </code></pre>
  
  <p>this is what i get in the console.</p>
  
  <p><a href="https://i.stack.imgur.com/tkz11.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkz11.png" alt="console"></a></p>