question

Marvelocity-9381 avatar image
0 Votes"
Marvelocity-9381 asked piaudonn commented

Angular NGRX adding navbar reducer to StoreModule.forRoot error

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

adfs
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

You need to change your tags. Right now you have Active Directory Federation Services. And it has nothing to do with your question.

0 Votes 0 ·

0 Answers