在 app.module 中注册减速器在 angular ngrx 状态管理中显示错误
Registering reducer in app.module shows error in angular ngrx state management
我正在 Angular 12 和最新的 NgRx 库中创建一个应用程序用于教程目的。我有以下模型、动作、reducer 和应用程序状态 class。
型号
export interface Tutorial {
name: string;
url: string;
}
操作数
import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model'
export const ADD_TUTORIAL = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL = '[TUTORIAL] Remove'
export class AddTutorial implements Action {
readonly type = ADD_TUTORIAL
constructor(public payload: Tutorial) {}
}
export class RemoveTutorial implements Action {
readonly type = REMOVE_TUTORIAL
constructor(public payload: number) {}
}
export type Actions = AddTutorial | RemoveTutorial
减速器
import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model';
import * as TutorialActions from './../_actions/tutorial.actions'
const initialState: Tutorial = {
name: 'Initial Tutorial',
url: 'http://google.com'
}
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {
switch(action.type) {
case TutorialActions.ADD_TUTORIAL:
return [...state, action.payload];
default:
return state;
}
}
应用状态
import { Tutorial } from "./_models/tutorial.model";
export interface AppState {
readonly tutorial: Tutorial[];
}
现在我想在app.module.ts文件中导入reducer。这是代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { reducer } from './_reducers/tutorial.reducer';
import { ReadComponent } from './read/read.component';
import { CreateComponent } from './create/create.component';
@NgModule({
declarations: [
AppComponent,
ReadComponent,
CreateComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ tutorial: reducer }),
AppRoutingModule,
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
但是在app.module.ts文件中,导入reducer出错。错误如下图:
Error: src/app/app.module.ts:19:29 - error TS2322: 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'.
19 StoreModule.forRoot({ tutorial: reducer }),
~~~~~~~~
src/app/_actions/tutorial.actions.ts:20:17
20 constructor(public payload: number) {}
~~~~~~~~~~~~~~~~~~~~~~
'payload' is declared here.
由于我是 NgRx 的新手,我不明白为什么会出现这个问题。请帮我解决问题。
我已经有一段时间没有使用该语法了,它可能是一个回归错误。您可以将其断言为 ActionReducerMap
StoreModule.forRoot({ tutorial: reducer } as ActionReducerMap<any,any>)
此外,我建议看一下 createAction 和 createReducer 语法 - 它使事情变得更简单。
我正在 Angular 12 和最新的 NgRx 库中创建一个应用程序用于教程目的。我有以下模型、动作、reducer 和应用程序状态 class。
型号
export interface Tutorial {
name: string;
url: string;
}
操作数
import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model'
export const ADD_TUTORIAL = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL = '[TUTORIAL] Remove'
export class AddTutorial implements Action {
readonly type = ADD_TUTORIAL
constructor(public payload: Tutorial) {}
}
export class RemoveTutorial implements Action {
readonly type = REMOVE_TUTORIAL
constructor(public payload: number) {}
}
export type Actions = AddTutorial | RemoveTutorial
减速器
import { Action } from '@ngrx/store'
import { Tutorial } from '../_models/tutorial.model';
import * as TutorialActions from './../_actions/tutorial.actions'
const initialState: Tutorial = {
name: 'Initial Tutorial',
url: 'http://google.com'
}
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {
switch(action.type) {
case TutorialActions.ADD_TUTORIAL:
return [...state, action.payload];
default:
return state;
}
}
应用状态
import { Tutorial } from "./_models/tutorial.model";
export interface AppState {
readonly tutorial: Tutorial[];
}
现在我想在app.module.ts文件中导入reducer。这是代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { reducer } from './_reducers/tutorial.reducer';
import { ReadComponent } from './read/read.component';
import { CreateComponent } from './create/create.component';
@NgModule({
declarations: [
AppComponent,
ReadComponent,
CreateComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ tutorial: reducer }),
AppRoutingModule,
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
但是在app.module.ts文件中,导入reducer出错。错误如下图:
Error: src/app/app.module.ts:19:29 - error TS2322: 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'.
19 StoreModule.forRoot({ tutorial: reducer }), ~~~~~~~~
src/app/_actions/tutorial.actions.ts:20:17 20 constructor(public payload: number) {} ~~~~~~~~~~~~~~~~~~~~~~ 'payload' is declared here.
由于我是 NgRx 的新手,我不明白为什么会出现这个问题。请帮我解决问题。
我已经有一段时间没有使用该语法了,它可能是一个回归错误。您可以将其断言为 ActionReducerMap
StoreModule.forRoot({ tutorial: reducer } as ActionReducerMap<any,any>)
此外,我建议看一下 createAction 和 createReducer 语法 - 它使事情变得更简单。