#[ngrx] typescript error in module registration

1 messages · Page 1 of 1 (latest)

sturdy mica
#

Consider the following ngrx objects:

export class ToggleTheme implements Action {
  public static readonly typeId = "[Theme Service] Toggle";
  readonly type = ToggleTheme.typeId;
}

export function selectedThemeReducer(state: ThemeState = initialState, action: ToggleTheme) {
  switch (action.type){
    case ToggleTheme.typeId:
      return {
        state,
        current: state.current == "DARK" ? "LIGHT" : "DARK"
      };
    default:
      return state;
  }
}

@NgModule({
   imports: [
      StoreModule.forRoot({
        theme: selectedThemeReducer
      }, {});
   ]
})
export class AppModule {}

Typescript is complaining in the module imports:

TS2322: Type '(state: ThemeState | undefined, action: ToggleTheme) => ThemeState | { state: ThemeState; current: string; }' is not assignable to type 'ActionReducer<ThemeState | { state: ThemeState; current: string; }, Action>'.   Types of parameters 'action' and 'action' are incompatible.     Type 'Action' is not assignable to type 'ToggleTheme'.       Types of property 'type' are incompatible.         Type 'string' is not assignable to type '"[Theme Service] Toggle"'.

If I switch the reducer parameter back to Action like below, the issue goes away - but I degrade the type and lose autocomplete. No big deal - it works, but just trying to get better at typescript and want to understand what the problem is. I think I could relax things with @ts-ignore but that makes me nervous being a C# guy 🙂

export function selectedThemeReducer(state: ThemeState = initialState, action: Action)
sturdy mica
#

I got around this by defining a union type export type ActionTypes = Action | ToggleTheme

topaz axle
#

Why you don't use createAction function to generate your actions?
Which guide are you following about NgRx?

sturdy mica
#

The one I'm following is part of the Angular complete guide 2022 edition on Udemy by Maximillian Schwarzmuller

#

He uses the class syntax, which as a newcomer to ngrx, is more "wordy" but helps me understand what's going on a little better than all the arrow functions

#

I ended up having to throw any :any to the return type of my reducers to get it to compile

topaz axle
#

I don't know the author nor the publication so I'm neutral, but the first thing I notice about its udemy page is that he forgot to update the title so it still says Angular 7, that I suppose was the state of the art angular version at the time of the first edition of that course.
Be careful following "updates" have been really rewriting, and not just "version bumpings".

sturdy mica
#

will do

topaz axle
#

If it force you to use any, it smells really bad.

#

Anf creator functions in NgRx are not just "less wordy", but they increase type safety too.

sturdy mica
#

I'll give the create functions a shot

sturdy mica
#

I figured this out... it was due to my lack of typescript knowledge.

#

When returning value from reducer, I was doing this:

# 
      return {
        state,
        view: (<actions.ApplyViewTagFilter>action).payload
      }
#

instead of what should be

      return {
        ...state,
        view: (<actions.ApplyViewTagFilter>action).payload
      }