I can't access to a redux store property working with angular.
I have two properties in the IApp, the first is an interface and the second a number.
interface AppStoreInterface {
layoutInterface: LayoutInterface,
numero: number
}
I can access the number with no problem, but when i try to access the layoutInterface nothings happends.
This is the module:
export class AppModule {
constructor(
ngRedux: NgRedux<AppStoreInterface>,
public devTools: DevToolsExtension
) {
const storeEnhancers = devTools.isEnabled() ? [devTools.enhancer()] : [];
ngRedux.configureStore(
rootReducer,
INITIAL_STATE,
[],
storeEnhancers
);
}
}
and this is the component:
export class MainLayoutComponent implements OnInit {
@select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: boolean;
@select('numero') test$ :number;
constructor(
public translate: TranslateService,
public dialog: MdDialog,
private ngRedux: NgRedux<AppStoreInterface>,
private actions: LayoutActions
) {
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|es/) ? browserLang : 'en');
this.siteStyle = "app";
this.boxed = "";
this.align = "start";
this.currentLang = "en";
this.showSettings = false;
this.showLeftButtton = false;
this.userLoggedIn = false;
//this.store = this.getStoreService();
//this.layoutInterface = this.getLayoutInterface();
}
}
What am I doing wrong?
When you use @select
you do not get the values from the store but an Observable
of that value. To access the value, you need to subscribe to that Observable
.
@select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: Observable<boolean>;
^^^^^^^^^^^^^^^^^^^^
@select('numero') test$: Observable<number>;
^^^^^^^^^^^^^^^^^^^
You can either directly access it in your component's template (html) by using the async
pipe.
<span *ngIf="sidebarStatus$ | async">Sidebar</span>
Or you can explicitly subscribe to it in your component's class and e.g. assign the values to another field like sidebarStatus: boolean;
:
ngOnInit() {
this.sidebarStatus$.subscribe(sidebarStatus => this.sidebarStatus);
}