Как подписаться на состояние ngRx - PullRequest
Новая
       11

Как подписаться на состояние ngRx

1 голос
/ 11 мая 2019

В настоящее время я делаю настройку приложения ngrx.Одна из целей - использовать ngrx для обучения, даже если приложение слишком маленькое.

Это небольшой проект для управления запасами пива.

У меня есть компонент, в котором я хочупоказать мой список пива: 

export class BeerListComponent implements OnInit {

    availableBeers$: Beer[];
    constructor(private breadcrumbService: BreadcrumbService,
        private beerService: BeersService,
        private store: Store<fromBeer.BeerState>) {
        this.breadcrumbService.setItems([
            { label: 'Beers' },
            { label: 'List' }
        ]);
    }

    ngOnInit() {
        this.store.select(fromBeer.getAvailableBeers).subscribe((beers: Beer[]) => {
            console.log(beers);
            this.availableBeers$ = beers;
        })
        console.log('fetching beers');
        this.beerService.fetchBeersList();
    }
}

мой пивной сервис выполняет следующие действия: 

export class BeersService {
    private firebaseSubscription: Subscription[] = [];

    constructor(
        private db: AngularFirestore,
        private store: Store<fromBeers.BeerState>) { }


    fetchBeersList() {
        this.firebaseSubscription.push(this.db
            .collection('beers')
            .valueChanges()
            .subscribe((beers: Beer[]) => {
                console.log("Received a firebase change");
                console.log(beers);
                this.store.dispatch(new SetAvailableBeers(beers));
            }, error => {
                console.log(error);
            }));
    }
}

и вот мои редуктор / действия:

Действия 

export enum BeersActionTypes {
    SET_AVAILABLE_BEERS = '[Beers] SET_AVAILABLE_BEERS'
};


export class SetAvailableBeers implements Action {
    readonly type = BeersActionTypes.SET_AVAILABLE_BEERS;

    constructor(public payload: Beer[]) {
        console.log(payload);
    }
}

export type BeersActions
                        = SetAvailableBeers;

Редуктор 

export interface BeerState {
    availableBeers: Beer[];
};

const initialState: BeerState = {
    availableBeers: []
};

export function beersReducer(state = initialState, action: BeersActions): BeerState {
    switch (action.type) {
        case BeersActionTypes.SET_AVAILABLE_BEERS: {
            console.log("Setting available beerse")
            return {
                ...state,
                availableBeers: action.payload
            };
        }

        default: {
            return state;
        }
    }
}


export const getAvailableBeers = (state: BeerState) => state.availableBeers;

Чего я не могу понять:

Я получаю пиво от firebase, но мой компонент никогда не получает обновления,Если я проверяю инструменты разработчика Chrome, я получаю только один undefined, но он не обновляется после.

Вот мои журналы: enter image description here

Я чувствую, что не правильно зарегистрировался в своем состоянии ngrx, но не могу понять, что я сделал не так?

1 Ответ

0 голосов
/ 11 мая 2019

Кажется, я нашел свою ошибку!

Я подписывался напрямую на beerReducers.getAvailableBeers, а не на мой app.reducer (который содержит CreateSelector и прочее)

...