объекты не обновляются в @ ngrx / data - PullRequest
Новая
       9

объекты не обновляются в @ ngrx / data

2 голосов
/ 27 февраля 2020

Я пытаюсь выучить @ ngrx / data путем создания простого приложения TODO

Я создал простой ToDoDataService для переопределения HTTP по умолчанию 

@Injectable()
export class TodosDataService extends DefaultDataService<Todo> {

  constructor(httpClient: HttpClient, httpUrlGenerator: HttpUrlGenerator) {
    super('Todo', httpClient, httpUrlGenerator);
  }

  getAll(): Observable<Array<Todo>> {
    console.log('asfsfsfsf')
    return this.http.get('https://jsonplaceholder.typicode.com/todos')
      .pipe(
        map((res: any) => res)
      );
  }

  getWithQuery(query): Observable<Array<any>> {
    console.log('asfsfsfsf', query);
    return this.http.get(`https://jsonplaceholder.typicode.com/todos?${query}`)
      .pipe(
        map((res: any) => res)
      );
  }    
}

В преобразователе маршрутов я делаю вот так 

@Injectable()
export class TodosResolver implements Resolve<boolean> {

  constructor(private todoService: TodoEntityService) {

  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {

    return this.todoService.loaded$
      .pipe(
        tap(loaded => {
          if (!loaded) {
            this.todoService.getAll();
          }
        }),
        filter(loaded => !!loaded),
        first()
      );
  }

}

Это работает нормально, и хранилище / сущности обновляются

Но в моем компоненте я делаю так 

export class HomeComponent implements OnInit {

  loading$: Observable<boolean>;

  todos$: Observable<Todo[]>;

  constructor(
    private todoService: TodoEntityService
  ) { }

  ngOnInit() {
    console.log('dsdf');
    this.todos$ = this.todoService.entities$
      .pipe(
        tap(todos => {
          console.log(todos);
          this.loadMore();
          console.log(todos);

        }),
        map((todos: any) => todos),
        first()
      );
  }

  loadMore() {
    this.todoService.getWithQuery('_start=20&_limit=5');
  }

}

Здесь API вызывает, но сущности это все еще показывает старые данные. Не уверен, что я делаю не так,

Пожалуйста, помогите

1 Ответ

2 голосов
/ 28 февраля 2020

Добро пожаловать на @ ngrx / data.

Я предлагаю вам просмотреть фрагмент кода внутри ngOnInit. Здесь вы вызываете метод loadMore, который подразумевает новый запрос Http при каждом обновлении коллекции.

Ваш код должен выглядеть следующим образом: 

ngOnInit() {
  // keep a local reference to observable of entities
  this.todos$ = this.todoService.entities$;

  // request a first load on view init
  this.loadMore();
}

Таким образом, код внутри TodosResolver на самом деле не нужно.

Если вы хотите реализовать функцию Load More , вам нужно отреагировать на другое событие (например, прокрутку или нажатие кнопки), а затем снова вызвать loadMore.

Ваши наблюдаемые, такие как entities$ или loaded$, являются просто конвейерами данных, и вы не должны отправлять действие при появлении новых значений. Если действительно необходимо, предпочтительнее написать @ngrx/effect, это сделано для этого.

Если вы хотите изменить данные или их формат, вы можете использовать для этого канал Observable, но не для вызова новое действие

Например, это нормально: 

this.todos$ = this.todoService.entities$.pipe(
  map(entities => entities.map(entity => ({
    ...entity,
    authorName: entity.authorFirstname + ' ' + entity.authorLastName
  })));
);

Надеюсь, мой ответ ясен и поможет вам немного.

...