angularreduxangular-redux

Can't access redux store property


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?


Solution

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