Website-Suche

angular - Fehler beim Registrieren von Reducern mit ActionReducerMap: "nicht zuweisbar zum Typ 'ActionReducerMap<AppState, Action>"

Unten ist eine vereinfachte Version meiner Angular 5-Anwendung. Ich habe einen Reducer, den ich in meinem Root-Modul registrieren möchte. In LINE A erhalte ich folgenden Fehler:

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 : Stammmodul

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

store/app.reducers.ts : innerhalb des 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 :im lokalen Speicher

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

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

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

Der Code funktioniert einwandfrei, wenn ich <AppState> in ZEILE A durch <any> ersetze. Hat sonst noch jemand ein ähnliches Problem gehabt? Ich habe versucht, danach zu googeln, aber konnte nichts Bedeutendes finden.

Antwort #1

Ihre Fehlermeldung besagt, dass die Eigenschaft post die falsche Methodensignatur hat. Sie ist (state: State, action: Action) => void, sollte aber (state: State, action: Action) => State sein.

In post.reducers.ts muss Ihr Reducer den Zustand zurückgeben, der ihm wie folgt übergeben wird:

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

Der Rückgabetyp wird implizit aus dem abgeleitet, was Sie zurückgeben, oder in diesem Fall nicht zurückgeben.

Sie könnten den Rückgabewert explizit mit ...): State {... angeben, aber Sie sollten dennoch den Zustand zurückgeben.

Antwort #2

Bitte gehe zu tsconfig.json und setze strict : false

Verwandte Artikel