ngrx订阅的存储不会在状态更改Angular5上更新 [英] ngrx subscribed store does not update on state change Angular5

问题描述

我正在构建一个应用程序，该应用程序使用城市名称发送到api端点并返回该城市的天气.

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.

它使用两个动作，一个将使用名称作为有效负载来更新城市，动作两个加载返回的新数组以更新状态

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

该效果使用switchMap映射api调用，然后返回结果.

The effect uses switchMap to map the api call then return results.

用于显示商店结果的选择功能仅在页面加载开始(空数组)和第一组结果时检测商店更新

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

并且之后没有检测到我商店中的更改

And does not detect the changes within my store after

页面显示数组中的第一个对象，但是状态中有3个对象.

the page displays the first object in the array, but there are 3 objects in the state.

app.state:

app.state:

import { Cities } from '../../model/weather';

//Holds data for city weather
export interface AppState {
  readonly cityWeather: Cities[];
}

在app.module中:

In app.module:

import {cityWeather} from './weather/store/reducers/weather';

    export const reducers = {
        cityWeather
     };

 StoreModule.forRoot(reducers, {initialState: undefined})

减速器

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;
}

@效果

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<Action> = this.actions$
      .ofType<UpdateCitiesAction>(UPDATE_CITIES_ACTION)
      .switchMap(action => {
          console.log(action)
          return this.weatherService.searchWeatherForCity(action.payload)
        })
    .map(cities =>  {
        console.log(cities);
        return new LoadCitiesAction(cities)
    });
}

这是我订阅商店的方式，出于测试目的，我同时使用两种方式:

this is how I subscribe to my store, for testing purposes I'm doing both ways:

@Component({
  selector: 'app-weather',
  template: `
  <app-search (onSearchCity)="citySearch($event)"></app-search>
  <app-results [cities]="cities$ | async "></app-results>  `
})

this.cities $ = this.store.select(state => state.cityWeather);

this.cities$ = this.store.select(state => state.cityWeather);

this.store.select(state => state.cityWeather)
.subscribe((data)=>{
  console.log(data)
})

推荐答案

发布后就解决了，看来我必须进行复制:

Solved as soon as I posted, it seems I have to make a copy:

function  handleLoadCitiesAction(state, action):Cities[]{
    let newState = action.payload.slice(); 
    return newState;
}

这篇关于ngrx订阅的存储不会在状态更改Angular5上更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！