объединить несколько выбранных хранилищ ngrx в один вызов Angular 7

#angular #typescript #rxjs

#угловатый #typescript #rxjs #angular

Вопрос:

В принципе, мне нужно сделать 3 звонка в мой ngrx магазин

Итак, что у меня было

 getUserInfo() {
    this._store.select('userInfo')
       .subscribe(result => this.userInfo = result);
}

getCats() {
    this._store.select('cats')
       .subscribe(result => this.cats = result);
}

getDogs() {
    this._store.select('dogs')
        .subscribe(result => this.dogs = result);
}

теперь я пытаюсь объединить это в один метод, поэтому я попробовал это

Я импортирую rxjs следующим образом

 import { combineLatest } from 'rxjs';
import { tap, filter } from 'rxjs/operators';

и это мой метод

 getStoreData() {
    combineLatest(
        this._store.select('userInfo'),
        this._store.select('cats'),
        this._store.select('dogs')
    ).pipe(tap(([userInfo, cats, dogs]) => console.log(userInfo, cats, dogs));
}

Я вызываю свой метод следующим образом

 ngOninit() {
   this.getStoreData()
}

моя проблема в том, что метод вызывается, но я никогда не получаю журнал консоли?

Я не уверен, что я делаю не так

Редактировать

Я также пытался

 getStoreData {
    forkJoin(
      this._store.pipe(select('userInfo')),
      this._store.pipe(select('xberts')),
      this._store.pipe(select('tasks'))
    ).subscribe(res => console.log(res));
}

но все та же проблема, нет console.log()

Любая помощь будет оценена!

Ответ №1:

Я думаю, вам нужно подписаться. попробуйте либо это:

 getStoreData() {
    combineLatest(
        this._store.select('userInfo'),
        this._store.select('cats'),
        this._store.select('dogs')
    ).pipe(filter(e => !e.includes(null)),tap(([userInfo, cats, dogs]) => console.log(userInfo, cats, dogs))
    .subscribe()
}

или

 ngOninit() {
   this.getStoreData().subscribe()
}

1. Подписка на последнюю версию combine сработала, но ее ударили три раза, так что я получаю [userInfo, null, null] тогда [userInfo, cats, null] , а затем, наконец [userInfo, cats, dogs] , есть ли способ предотвратить это??

2. смотрите мою правку. я бы добавил filter() в свой канал, что-то вроде этого.

3. Вы не можете включить массив??

4. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /… определенно может. я все время

Ответ №2:

Вы можете использовать forkJoin для своего сценария

Пример:

    forkJoin(
            this.store.pipe(select('userInfo')),
            this.store.pipe(select('cats')),
            this.store.pipe(select('dogs'))
        ).subscribe(res => { });

Что-то вроде этого

 export const selectUser = createSelector(
    userState,
    state => state.user
);

1. Пожалуйста, смотрите мой обновленный вопрос, я сделал это, но я не получаю console.log с res

2. Могу ли я увидеть ваше начальное значение в reducer?

3. Я знаю, что эти методы хранения работают, поскольку все они работают по отдельности, но начальное состояние всегда равно null, но заполняется с помощью вызова службы

4. Тогда как вы получаете данные в своем index.ts?

5. Не уверен, о чем вы говорите