title: ngrx subscribed store does not update on state change Angular5
body: <p>I'm build an app that takes the name of a city sends to an api end point and returns the weather for that city.</p>
  
  <p>It uses an two Actions, one that will update the cities, using the name as the payload, Action two loads the new array returned to update the state</p>
  
  <p>The effect uses switchMap to map the api call then return results.</p>
  
  <p>The select function, to display results of the store, only detects the store updates on initiation of page load (Empty array) and for the first set of results </p>
  
  <p>And does not detect the changes within my store after</p>
  
  <p>the page displays the first object in the array, but there are 3 objects in the state.</p>
  
  <p><a href="https://i.stack.imgur.com/bBntw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBntw.png" alt="enter image description here"></a></p>
  
  <p>app.state:</p>
  
  <pre><code>import { Cities } from '../../model/weather';
  
  //Holds data for city weather
  export interface AppState {
    readonly cityWeather: Cities[];
  }
  </code></pre>
  
  <p>In app.module:</p>
  
  <pre><code>import {cityWeather} from './weather/store/reducers/weather';
  
      export const reducers = {
          cityWeather
       };
  
   StoreModule.forRoot(reducers, {initialState: undefined})
  </code></pre>
  
  <p>The reducers:</p>
  
  <pre><code>export function cityWeather(state:Cities[] = [], action:Action) : any {
      switch (action.type)  {
          case LOAD_CITIES_ACTION:
          return  handleLoadCitiesAction(state, action);
          case UPDATE_CITIES_ACTION:
          console.log(state)
          return handleUpdateCitiesAction(state, action);
      default:
          return state;
      }
  
  }
  function  handleUpdateCitiesAction(state, action):Cities[]{
      //Must always return the state
      console.log(state, action.payload)
          return state;
  }
  
  function  handleLoadCitiesAction(state, action):Cities[]{
      //Return the payload that holds the new array for cities
      console.log(action.payload)
      return action.payload;
  }
  </code></pre>
  
  <p>@Effects</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Actions, Effect} from "@ngrx/effects";
  import 'rxjs/add/operator/switchMap';
  import { WeatherService } from '../../weather.service';
  import { UpdateCitiesAction, UPDATE_CITIES_ACTION, LoadCitiesAction } from '../actions/weather';
  import {Observable} from "rxjs/Observable";
  import {Action} from "@ngrx/store";
  
  @Injectable()
  export class WeatherEffects {
  
    constructor(private actions$: Actions, private weatherService: WeatherService) {
  
    }
  
    @Effect() cityWeather$: Observable&lt;Action&gt; = this.actions$
        .ofType&lt;UpdateCitiesAction&gt;(UPDATE_CITIES_ACTION)
        .switchMap(action =&gt; {
            console.log(action)
            return this.weatherService.searchWeatherForCity(action.payload)
          })
      .map(cities =&gt;  {
          console.log(cities);
          return new LoadCitiesAction(cities)
      });
  }
  </code></pre>
  
  <p>this is how I subscribe to my store, for testing purposes I'm doing both ways:</p>
  
  <pre><code>@Component({
    selector: 'app-weather',
    template: `
    &lt;app-search (onSearchCity)="citySearch($event)"&gt;&lt;/app-search&gt;
    &lt;app-results [cities]="cities$ | async "&gt;&lt;/app-results&gt;  `
  })
  </code></pre>
  
  <p>this.cities$ = this.store.select(state => state.cityWeather);</p>
  
  <pre><code>this.store.select(state =&gt; state.cityWeather)
  .subscribe((data)=&gt;{
    console.log(data)
  })
  </code></pre>