How to subscribe to a ngRx state

Question

I'm currently doing a setup of an ngrx app. One of the goal is to use ngrx to train myself even if the application is too small.

It's a small project for beer inventory management.

I've a component in which I want to display my beer list:

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

my beer service does the following:

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

and here are my reducer/actions:

Actions

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;

Reducer

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;

What I cannot understand:

I receive beers from firebase, but my component never gets the update. If I check the chrome dev tools, I only get one this undefined but this doesn't get updated after.

Here are my logs:

I feel I did not register correctly to my ngrx state, but I cannot figure out what I did wrong?

Answer 1

I think I found my error!

I was subscribing directly to the beerReducers.getAvailableBeers and not the one of my app.reducer(which contains the CreateSelector and stuff)