CODEWITHSUNDEEP
angularngrx-store
André Luiz
André Luiz

Reputation: 7282

NgRx - how to properly select from state

I'm studying NgRx and following the get started tutorial from their website. Debugging with the Redux Dev Tools chrome extension I can see that my actions are being fired and are updating the store properly. Although I'm having problems selecting from the state, from a component.

In the app.module.ts:

import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './store/reducers';

and then

imports: [
...
        StoreModule.forRoot(reducers, { metaReducers }),
        !environment.production ? StoreDevtoolsModule.instrument() : [],
...
]

In the store/reducers/index.ts

import {
  ActionReducer,
  ActionReducerMap,
  createFeatureSelector,
  createSelector,
  MetaReducer
} from '@ngrx/store';
import { environment } from '../../../environments/environment';
import * as fromLayout from './layout.reducer';


export interface State {
    [fromLayout.layoutFeatureKey]: fromLayout.State;
}

export const reducers: ActionReducerMap<State> = {

  [fromLayout.layoutFeatureKey]: fromLayout.reducer,
};

export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

In the layout.reducer.ts

export const layoutFeatureKey = 'layout';

export interface State {
    showSettingsPanel: boolean;
    theme: string;
    scheme: string;
    layout: string;
}

export const initialState: State = {
    showSettingsPanel: false,
    theme: 'default',
    scheme: 'light',
    layout: 'classy',
};

export const reducer = createReducer(
    initialState,
    on(layoutActions.toggleSettingsPanel, state => ({ ...state, showSettingsPanel: !state.showSettingsPanel })),
    on(layoutActions.changeTheme, (state, { theme }) => ({ ...state, theme })),
    on(layoutActions.changeScheme, (state, { scheme }) => ({ ...state, scheme })),
    on(layoutActions.changeLayout, (state, { layout }) => ({ ...state, layout })),
);

And finally my component:

@Component({
    selector     : 'example',
    templateUrl  : './example.component.html',
    encapsulation: ViewEncapsulation.None
})
export class ExampleComponent
{
    layout$: Observable<layoutReducer.State>;
    theme$: Observable<string>;

    constructor(
        private store: Store<layoutReducer.State>
    )
    {
        this.layout$ = store.select(state => state);
        this.theme$ = store.select('theme');
    }
}

Component HTML:

   <h3>{{(theme$ | async)}}</h3>

    <div *ngIf="( layout$ | async ) as layout">
        <h3>{{ layout.theme }}</h3>
        <h3>{{ layout.scheme }}</h3>
    </div>

In the end, nothing is printed. What am I doing wrong in my select from the state?

Upvotes: 0

Views: 2823

Answers (1)

AliF50
AliF50

Reputation: 18809

Try subscribing within the component for debugging.

export class ExampleComponent implements OnInit {
  layout$: Observable<laoutReducer.State>;
  theme$: Observable<string>;

  constructor(
        private store: Store<layoutReducer.State>
    )
    {}

  ngOnInit() {
    // this should log the whole state for debugging, remove once debugged
    this.store.select(state => state).subscribe(state => console.log({ state }); 
    // I imagine layout$ and theme$ should be like this but the above should help you debug
    this.layout$ = this.store.select(layoutFeatureKey);
    this.theme$ = this.store.select(layoutFeatureKey).pipe(
      map(layout => layout.theme),
    );
  }

}

Upvotes: 1

Related Questions