ウェブサイト検索

typescript - angular ngrx ストアプロジェクトでパラメータ 'action' と 'action' の型が互換性がありません


私はAngularで最初のNGRXプロジェクトを作成しており、このチュートリアルに従っています(すべてのファイルのコードはこちらでご覧ください)。

app.module.tsでリデューサーを宣言すると、このコンパイルエラーが発生します。

Type '(state: Tutorial[] | undefined, action: Actions) => Tutorial[]' is not assignable to type 'ActionReducer<Tutorial[], Action>'.
  Types of parameters 'action' and 'action' are incompatible.
    Type 'Action' is not assignable to type 'Actions'.
      Property 'payload' is missing in type 'Action' but required in type 'RemoveTutorial'.
22       **tutorial: reducer**
         ~~~~~~~~
  src/app/actions/tutorial.actions.ts:20:17
    20     constructor(public payload: Tutorial) { }
                       ~~~~~~~~~~~~~~~~~~~~~~~~
    'payload' is declared here.
 imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({
      tutorial: reducer ///this line is throwing above error
    })
  ],

回答 #1

これを修正したい場合は、関数内の TutorialAction を ngrx の一般的な Action に変更してください。その後、関数内で次のように TutorialAction として定数を宣言します:

export function reducer(state: Tutorial[] = [initialState], action: Action) {
    const tutorialAction = action as TutorialActions.Actions; 

     switch(tutorialAction .type) { .. }

}

うまくいくか教えてください

関連記事