如何訂閱ngRx狀態

Question

我目前正在安裝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 dev工具，只會得到一個undefined工具，但此后不會更新。

這是我的日志：

我覺得我沒有正確注冊到ngrx狀態，但是我無法弄清楚自己做錯了什么？

Answer 1

我想我發現了我的錯誤！

我直接訂閱beerReducers.getAvailableBeers，而不是我的app.reducer（包含CreateSelector和其他東西）之一