Getting object instead of list from selecting the store with NgRx - state

Question

I'm having problems retrieving an list from my state in the store, because the list is wrapped around with an object.
Here is my code
beer-list.component.ts
#Component({
selector: 'app-beer-list',
templateUrl: './beer-list.component.html',
styleUrls: ['./beer-list.component.css']
})
export class BeerListComponent implements OnInit {
public beers$: Observable<Beer[]>;
constructor(private store: Store<BeerState>) {
}
ngOnInit(): void {
this.beers$ = this.store.select((state: BeerState) => state.beers);
this.store.dispatch(getBeersOnTap());
}
beer.actions.ts
export const getBeersOnTap = createAction(
'[Beer List] Get beers'
);
export const getBeersOnTapSuccess = createAction(
'[Beer List] Get beers succeeded',
props<{beers: Beer[]}>()
);
export const getBeersOnTapFailed = createAction(
'[Beer List] Get beers failed'
);
beer.reducers.ts
export interface BeerState {
beers: Beer[];
}
export const initialState: BeerState = {
beers: []
};
export const beerReducer = createReducer(
initialState,
on(getBeersOnTapSuccess, (state, {beers}) => ({...state, beers: beers}) // Payload comes from an effect
));
export function reducer(state: BeerState | undefined, action: Action) {
return beerReducer(state, action);
}
What I'm retrieving from selecting beers from the store:
{
beers: {
beers: [
...

Answer 1

The beerReducer is probably added to a beers feature? So you will have to select the beer state first.
this.beers$ = this.store.select((state: AppState) => state.beers.beers);

Answer 2

Ok. I finally figured it out. I needed to adjust my state tree and add some selectors to select the beers from the store.
Here is my updated NgRx code where changes are commented:
beer-list.component.ts
#Component({
selector: 'app-beer-list',
templateUrl: './beer-list.component.html',
styleUrls: ['./beer-list.component.css']
})
export class BeerListComponent implements OnInit {
public beers$: Observable<Beer[]>;
constructor(private store: Store<AppState>) {
}
ngOnInit(): void {
this.beers$ = this.store.select(selectBeers); // Using selector here
this.store.dispatch(getBeersOnTap());
}
}
app.state.ts (new file)
export interface AppState {
beerState: BeerState
}
beer.selectors.ts (new file)
const selectBeerState = (state: AppState) => state.beerState;
export const selectBeers = createSelector(
selectBeerState,
(state) => state.beers
)