[英]How to subscribe to a ngRx state
I'm currently doing a setup of an ngrx app. 我目前正在安装ngrx应用。 One of the goal is to use ngrx to train myself even if the application is too small. 目标之一是即使应用程序太小,也要使用ngrx进行自我训练。
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. 我从firebase那里收到了啤酒,但是我的组件从未获得更新。 If I check the chrome dev tools, I only get one this undefined
but this doesn't get updated after. 如果我检查chrome dev工具,只会得到一个undefined
工具,但此后不会更新。
I feel I did not register correctly to my ngrx state, but I cannot figure out what I did wrong? 我觉得我没有正确注册到ngrx状态,但是我无法弄清楚自己做错了什么?
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) 我直接订阅beerReducers.getAvailableBeers,而不是我的app.reducer(包含CreateSelector和其他东西)之一
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.