The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

Question

The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

I have encountered a persistent error in my main.module.ts. The code snippet triggering the error is as follows:

@NgModule({
  declarations: [
    PressComponent,
    LegalComponent,
    InviteComponent
  ],
  providers: [
    AuthService
  ],
  imports: [
    HomeModule,
    MainRoutingModule,
    ContactModule,
    EffectsModule.forRoot([
      AuthEffects
    ]),
    StoreModule.forRoot(AuthReducer, {
      metaReducers,
      runtimeChecks: {
        strictActionImmutability: true,
        strictStateImmutability: true,
      },
    }),
    SectionHeaderGroupModule,
    FormRegisterModule,
    ReactiveFormsModule
  ]
})

export class MainModule {
}

The specific error message that I am encountering reads:

Error:(34, 25) TS2345: Argument of type '(state: State, action: AuthActionsUnion) => State' is not assignable to parameter of type 'ActionReducerMap<State, Action> | InjectionToken<ActionReducerMap<State, Action>>'.
  Type '(state: State, action: AuthActionsUnion) => State' is not assignable to type 'InjectionToken<ActionReducerMap<State, Action>>'.
    Property '_desc' is missing in type '(state: State, action: AuthActionsUnion) => State'.

In an effort to resolve this issue, you can refer to my auth.reducer.ts file for context:

import { IUser } from '../shared/models/user';
import * as AuthActions from './auth.actions';

export interface State {
  user: IUser | null;
  error: any;
}

const initialState: State = {
  user: null,
  error: '',
};

export function AuthReducer(state = initialState, action: AuthActions.AuthActionsUnion): State {
  switch (action.type) {
    case AuthActions.AuthActionsTypes.GetUserDataGoogleSignIn: {
      return {
        ...state,
        user: action.payload,
        error: '',
      };
    }
    
    // Other cases omitted for brevity
    
  }
}

function getErrorMessage(error): string {
  switch (error) {
    case 'auth/wrong-password':
      return 'Wrong password';
    case 'auth/user-not-found':
      return 'IUser does not exist';
    case 'auth/invalid-email':
      return 'Invalid email address';
    default:
      return error;
  }
}

If you have any insights or solutions on how to rectify this error, kindly share them with me.

javascript angular typescript ngrx angular8

Answer 1

Answer №1

Your confusion between the syntax of ngrx v8 and v7 has been noted. Here is how I configure my code:

In app.module.ts

StoreModule.forRoot(ROOT_REDUCERS, {
  metaReducers,
  runtimeChecks: {
    strictStateImmutability: true,
    strictActionImmutability: true
  }
}),

Next, the root reducer:

import {
  ActionReducer,
  ActionReducerMap,
  MetaReducer,
  Action
} from "@ngrx/store";
import { environment } from "../../../environments/environment";
import * as fromRouter from "@ngrx/router-store";
import { InjectionToken } from "@angular/core";

/**
 * Every reducer module's default export is the reducer function itself. In
 * addition, each module should export a type or interface that describes
 * the state of the reducer plus any selector functions. The `* as`
 * notation packages up all of the exports into a single object.
 */
/**
 * As mentioned, we treat each reducer like a table in a database. This means
 * our top level state interface is just a map of keys to inner state types.
 */
export interface State {
  router: fromRouter.RouterReducerState<any>;
}

/**
 * Our state is composed of a map of action reducer functions.
 * These reducer functions are called with each dispatched action
 * and the current or initial state and return a new immutable state.
 */
export const ROOT_REDUCERS = new InjectionToken<
  ActionReducerMap<State, Action>
>("Root reducers token", {
  factory: () => ({
    router: fromRouter.routerReducer
  })
});

And here is how ngrx v8 writes the reducer:

import { createReducer, on } from "@ngrx/store";
import {
  EntityState,
  EntityAdapter,
  createEntityAdapter
} from "@ngrx/entity";

import * as PostActions from "../actions/post.actions";

import { IPost } from "../models/post.model";

export interface PostState extends EntityState<IPost> {
  selectedPost: IPost;
  errors: any;
}

const postAdapter: EntityAdapter<IPost> = createEntityAdapter<IPost>();

const initialState: PostState = postAdapter.getInitialState({
  selectedPost: null,
  errors: null
});

export const postReducer = createReducer(
  initialState,
  on(PostActions.LoadPostsSuccess, (state, { posts }) =>
    postAdapter.addAll(posts, state)
  ),
  on(PostActions.LoadPostSuccess, (state, { post }) => {
    return postAdapter.addOne(post, { ...state, selectedPost: post });
  }),
  on(PostActions.UpdatePost, (state, { post }) => {
    return postAdapter.updateOne(post, state);
    //return postAdapter.updateOne(post, { ...state, selectedPost: post });
  }),
  on(PostActions.UpdateSelectedPost, (state, { selectedPost }) => {
    console.log(selectedPost);
    return { ...state, selectedPost };
  }),

  //catch errors
  on(
    PostActions.LoadPostsFail,
    PostActions.LoadPostFail,
    PostActions.UpdatePostFail,
    (state, { errors }) => {
      return { ...state, errors };
    }
  )
);

export const { selectAll } = postAdapter.getSelectors();

Answer 2

Your confusion between the syntax of ngrx v8 and v7 has been noted. Here is how I configure my code:

In app.module.ts

StoreModule.forRoot(ROOT_REDUCERS, {
  metaReducers,
  runtimeChecks: {
    strictStateImmutability: true,
    strictActionImmutability: true
  }
}),

Next, the root reducer:

import {
  ActionReducer,
  ActionReducerMap,
  MetaReducer,
  Action
} from "@ngrx/store";
import { environment } from "../../../environments/environment";
import * as fromRouter from "@ngrx/router-store";
import { InjectionToken } from "@angular/core";

/**
 * Every reducer module's default export is the reducer function itself. In
 * addition, each module should export a type or interface that describes
 * the state of the reducer plus any selector functions. The `* as`
 * notation packages up all of the exports into a single object.
 */
/**
 * As mentioned, we treat each reducer like a table in a database. This means
 * our top level state interface is just a map of keys to inner state types.
 */
export interface State {
  router: fromRouter.RouterReducerState<any>;
}

/**
 * Our state is composed of a map of action reducer functions.
 * These reducer functions are called with each dispatched action
 * and the current or initial state and return a new immutable state.
 */
export const ROOT_REDUCERS = new InjectionToken<
  ActionReducerMap<State, Action>
>("Root reducers token", {
  factory: () => ({
    router: fromRouter.routerReducer
  })
});

And here is how ngrx v8 writes the reducer:

import { createReducer, on } from "@ngrx/store";
import {
  EntityState,
  EntityAdapter,
  createEntityAdapter
} from "@ngrx/entity";

import * as PostActions from "../actions/post.actions";

import { IPost } from "../models/post.model";

export interface PostState extends EntityState<IPost> {
  selectedPost: IPost;
  errors: any;
}

const postAdapter: EntityAdapter<IPost> = createEntityAdapter<IPost>();

const initialState: PostState = postAdapter.getInitialState({
  selectedPost: null,
  errors: null
});

export const postReducer = createReducer(
  initialState,
  on(PostActions.LoadPostsSuccess, (state, { posts }) =>
    postAdapter.addAll(posts, state)
  ),
  on(PostActions.LoadPostSuccess, (state, { post }) => {
    return postAdapter.addOne(post, { ...state, selectedPost: post });
  }),
  on(PostActions.UpdatePost, (state, { post }) => {
    return postAdapter.updateOne(post, state);
    //return postAdapter.updateOne(post, { ...state, selectedPost: post });
  }),
  on(PostActions.UpdateSelectedPost, (state, { selectedPost }) => {
    console.log(selectedPost);
    return { ...state, selectedPost };
  }),

  //catch errors
  on(
    PostActions.LoadPostsFail,
    PostActions.LoadPostFail,
    PostActions.UpdatePostFail,
    (state, { errors }) => {
      return { ...state, errors };
    }
  )
);

export const { selectAll } = postAdapter.getSelectors();

The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

Answer №1

Similar questions

The installation process was unsuccessful due to an error in the postinstall script for [email protected]

CRUD operation: The DELETE method is invoked prior to the user's request

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

Can you explain the purpose of this script? Is it considered harmful?

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

How do you write functions in ES6?

Using JavaScript to define an array of objects

Iterate through an object, with certain keys being duplicated

The type '{}' cannot be assigned to the type '{ title: string; text: string; }'

Effective ways to request verification prior to eliminating an item with ng-select (multi-select)

Transform a dropdown menu into an inverted footer

Dynamically loading Ember templates with asynchronous requests

Ways of transferring session variables from one page to another?

Angular, a Self-sufficient Module of Cascading Style Sheets

Using Angular 2, how to filter a single column based on multiple values?

Adding up the values of an array based on their position in Javascript

Is there a way to utilize the 'interval' Rxjs function without triggering the Change Detection routine?

Divergence in results: discrepancy found in the outputs of nodejs crypto module and tweetnacl.js

Setting up only two input fields side by side in an Angular Form

Begin the NextJS project by redirecting the user to the Auth0 page without delay