Angular NGRX adding navbar reducer to StoreModule.forRoot error

Question

I am learning ngrx and want to add state management for my navbar component which is accessible across all components. I read on this site the StoreModule.forRoot is prefer over StoreModule.forFeature

I moved it from StoreModule.forFeature("navbar", navBarReducer) in the navbar.Module.ts but I removed it to move to the app.module.ts

but I am getting the following error in app.module.ts

Error: src/app/app.module.ts:28:26 - error TS2322: Type '(state: NavBarState | undefined, action: Actions) => NavBarState' is not assignable to type 'ActionReducer<NavBarState, Action>'.
[0] Types of parameters 'action' and 'action' are incompatible.
[0] Type 'Action' is not assignable to type 'Actions'.
[0] Property 'payload' is missing in type 'Action' but required in type 'LoadNavBarFail'.
[0]
[0] 28 StoreModule.forRoot({routes: navBarReducer}),
[0] ~~~~~~
[0]
[0] src/app/navbar/state/navbar.actions.ts:25:17
[0] 25 constructor(public payload: string) {}
Here is my action code

import { Action } from '@ngrx/store';
import { RouteInfo } from '../navbar.model';

// Define the Action Types
export enum NavBarActionType {
LOAD_NAVBAR = "[NAVBAR] Load Navbar",
LOAD_NAVBAR_SUCCESS = "[NAVBAR] Load Navbar Success",
LOAD_NAVBAR_FAILURE = "[NAVBAR] Load Navbar Fail"
}

// Define Actions
export class LoadNavBar implements Action {
readonly type = NavBarActionType.LOAD_NAVBAR
}

export class LoadNavBarSuccess implements Action {
readonly type = NavBarActionType.LOAD_NAVBAR_SUCCESS

constructor(public payload: RouteInfo[]) {}

}

export class LoadNavBarFail implements Action {
readonly type = NavBarActionType.LOAD_NAVBAR_FAILURE

constructor(public payload: string) {}

}

export type Actions = LoadNavBar | LoadNavBarSuccess | LoadNavBarFail;
and reducer

import * as navBarActions from "./navbar.actions";
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { RouteInfo } from "../navbar.model";
import * as fromRoot from "../../state/app-state";

export interface NavBarState {
routes: RouteInfo[],
loading: boolean,
loaded: boolean,
error: string
}

export interface AppState extends fromRoot.AppState {
routes: NavBarState
}

export const initialState: NavBarState = {
routes: [],
loading: false,
loaded: false,
error: ""
}

export function navBarReducer(
state=initialState,
action: navBarActions.Actions
) : NavBarState
{
switch(action.type) {
case navBarActions.NavBarActionType.LOAD_NAVBAR: {
return {
...state,
loading: true
}
}
case navBarActions.NavBarActionType.LOAD_NAVBAR_SUCCESS: {
return {
...state,
loading: false,
loaded: true,
routes: action.payload
}
}
case navBarActions.NavBarActionType.LOAD_NAVBAR_FAILURE: {
return {
...state,
loading: false,
loaded: false,
error: action.payload
}
}
default : {
return state;
}
}
}

const getNavBarFeatureState = createFeatureSelector<NavBarState>("navbar");

export const getRoutes = createSelector(
getNavBarFeatureState,
(state: NavBarState) => state.routes
)
export const getRoutesLoading = createSelector(
getNavBarFeatureState,
(state: NavBarState) => state.loading
)
export const getRoutesLoaded = createSelector(
getNavBarFeatureState,
(state: NavBarState) => state.loaded
)
export const getError = createSelector(
getNavBarFeatureState,
(state: NavBarState) => state.error
)
app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule} from "@ngrx/store-devtools";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './share/search/search.component';

import { navBarReducer } from './navbar/state/navbar.reducer';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
NavbarComponent,
HeaderComponent,
SearchComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({navBarState: navBarReducer}),
AppRoutingModule,
HttpClientModule,
EffectsModule.forRoot([]),
StoreDevtoolsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }