I have implemented the use of createSelector from @ngrx/store in order to select an array of objects from my store.
Despite successfully compiling my application, I encountered the following error:
Argument of type 'MemoizedSelector<ICommonAppState, IMenuItemsObject[]>' is not assignable to parameter of type 'string'.
navigation.selectors.ts
import { createSelector } from '@ngrx/store';
import { REDUCER_KEY } from './navigation.constants';
import { ICommonAppState } from './../../app.state';
import { INavigationState } from './navigation.reducer';
const getStore = (state: ICommonAppState) => state[REDUCER_KEY];
export const navigationItems = createSelector(getStore, (state: INavigationState) => state.items);
navigation.component.ts
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { INavigationState, IMenuItemsObject } from '../store/navigation/navigation.reducer';
import { FetchNavigationItems } from './../store/navigation/navigation.actions';
import { navigationItems } from '../store/navigation/navigation.selectors';
@Component({
selector: 'app-navigation-component',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'],
})
export class NavigationComponent implements OnInit {
public navigation$: Observable<IMenuItemsObject[]>;
constructor(private store: Store<INavigationState>) {}
ngOnInit() {
this.store.dispatch(new FetchNavigationItems());
this.navigation$ = this.store.select(navigationItems);
}
}
The line causing the error is:
this.navigation$ = this.store.select(navigationItems);navigation.effects.ts
@Effect()
fetchNavigationItems: Observable<Action> = this.actions$
.ofType<ActionWithPayload>(FETCH_NAVIGATION_ITEMS)
.pipe(
mergeMap(() => this.navigationService.get()),
switchMap(navigation =>
of({
type: FETCH_NAVIGATION_ITEMS_SUCCESS,
payload: navigation,
})
)
);
Finally, here's my navigation.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IMenuItemsObject } from '../../../store/navigation/navigation.reducer';
@Injectable()
export default class NavigationService {
constructor(private http: HttpClient) {}
get = () => this.http.get<INavMenuItems>('{api:navigation}');
}
export interface INavMenuItems {
header: {
items: IMenuItemsObject[];
};
}
The versions being utilized are as follows:
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ngrx/effects": "^6.0.1",
"@ngrx/store": "^6.0.1",
"bulma": "^0.7.1",
"core-js": "^2.5.4",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.10",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
edit The interfaces that are also being used include:
export interface IMenuItemsObject {
key: string;
className: string;
type: string;
order: number;
showInMenu: boolean;
showAsIcon: boolean;
openInNewWindow: boolean;
menuItemText?: string;
url?: string;
displayStyle?: string;
children: IMenuChildren[];
}
export interface IMenuChildren {
key: string;
className: string;
type: string;
order: number;
url: string;
showInMenu: boolean;
showAsIcon: boolean;
openInNewWindow: boolean;
displayStyle?: string;
menuItemText?: string;
}