Store.Select()
constructor(private store: Store<GlobalState>) { console.log('store: ' + this.store); }
this.store.select()
An Example State
export interface State { userData: { totalScore: number }, currentVideos: Array<any> };
export const initialState: State = { userData: { totalScore: 0 }, currentVideos: [] };
export const mainStoreReducer: ActionReducer<State> = (state = initialState, action: Action) => {
StoreModule.provideStore({mainState: mainStoreReducer, otherState: otherReducer}),
export interface GlobalState { mainState: State, otherState: OtherState }
Meanwhile, Back In The Component...
constructor(private store: Store<GlobalState>) {} ngOnInit { // Do initialization stuff here... }
Pure String Selector
this.store.select("mainStoreReducer") .subscribe((data: any) => { this.zone.run(() => { this.totalScore = data.useData.totalScore; }); });
Interface Hardcoding
this.store.select(s => s.mainStoreReducer.userData) .subscribe((data: any) => { this.zone.run(() => { this.totalScore = data.totalScore; }) });
Encapsulated Selector
export const getCurrentVideosArray= (state:GlobalState) => state.mainStoreReducer.currentVideos;
import {getCurrentVideosArray} from "../../state-management/selectors/main-selector"; this.store.select(getCurrentVideosArray) .subscribe((data: any) => { this.zone.run(() => { this.totalScore = data.totalScore; }) });