Getting error while registering reducers using ActionReducerMap: "not assignable to type 'ActionReducerMap<AppState, Action>"

Question

Below is simplified version of my Angular 5 application. I have a reducer, which I want to register in my root module. In LINE A I am getting following error:

ERROR in src/app/store/app.reducers.ts(7,14): error TS2322: Type '{ post: (state: State, action: Action) => void; }' is not assignable to type 'ActionReducerMap<AppState, Action>'.
  Types of property 'post' are incompatible.
    Type '(state: State, action: Action) => void' is not assignable to type 'ActionReducer<State, Action>'.
      Type 'void' is not assignable to type 'State'.

app.module.ts : Root module

  imports: [
    ...
    StoreModule.forRoot(reducers)
  ],

store/app.reducers.ts : inside Global store

import {ActionReducerMap} from "@ngrx/store";
import * as fromPost from "../postDir/store/post.reducers";

export interface AppState {
  post:fromPost.State
}
export const reducers: ActionReducerMap<AppState> = { //=======LINE A ======
  post:fromPost.postReducer
};

postDir/store/post.reducers.ts :inside local store

export interface State{
  query:string
  posts:Post[]
}

const initialPostState: State = {
  query:"initial",
  posts:[]
};

export function postReducer(state = initialPostState, action:postActions.PostActions){}

Code works fine if I replace <AppState> in LINE A with <any> Did anyone else face the similar issue? I tried to google but could not find anything significant.

Solution 1

Your error message says that property post has the wrong method signature. It is (state: State, action: Action) => void, but should be (state: State, action: Action) => State.

In post.reducers.ts your reducer needs to return the state that is passed into it like this:

export function postReducer(state = initialPostState, action:Action) { 
  return state;
};

The return type is being implicitly inferred from what you are, or in this case aren't, returning.

You could explicitly state the return type with ...): State {... but you should still return the state.

Solution 2

please go to tsconfig.json and do strict : false

Comments

[dasfdsa]

@bygraceThanks for your response but it does return state obj in my real code. I have omitted that and a lot of other code to make this problem minimal.

[bygrace]

@SKG can yo show the postReducer code? Have you tried explicitly stating its return type? The error means that the transpiler thinks that postReducer doesn't return anything.

[dasfdsa]

I found out that the postReducer was returning incompatible type. Something like: return [x] instead of return [...x]

[Stephane]

In your default case, why not having return state; instead ?

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[wael jawadi]

Thanks, this works for me.