Argument of type 'MemoizedSelector<ICommonAppState, IMenuItemsObject[]>' is not assignable to parameter of type 'string'

Question

I am using createSelector from @ngrx/store to select an array of objects from my store.

My application compiles, however I am getting the 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);
  }
}

It is this line that is being highlighted as an error 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,
        })
      )
    );

and finally 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[];
  };
}

I am using the following versions...

  "@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 These are the interface's I am also using

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

Answer 1

Solved it. I was passing the wrong interface into the component constructor.

This should have been constructor(private store: Store<ICommonAppState>) {} as my selector picks from the common app state and then isolates the INavigationState