我无法在 app.module 中为 ngrx 注册我的减速器

Question

我是 ngrx 的新手，正在尝试遵循几个示例。我正在使用 Angular 13 和 ngrx 13.0.1.

我的状态声明为：

import { Swivlr } from '../Models/swivlr.model';

export interface AppState {
  readonly swivlr: Swivlr[];
}

我已经声明我的减速器如下：

import { Action, State } from '@ngrx/store';
import { Swivlr } from '../../Models/swivlr.model';
import * as SwivlrActions from './../Actions/swivlr.actions';

export const initialState: AppState = {
 swivlr: [{
  key: '1',
  name: 'Swivlr',
  url: 'http://Swivlr.com',
  width: '48',
  height: '48'
 }]
}

export function reducer(state = [initialState], action: SwivlrActions.Actions) {

switch (action.type) {
case SwivlrActions.ADD_SWIVLR:
  return [...state, action.payload];
case SwivlrActions.REMOVE_SWIVLR:
  state.splice(action.payload, 1)
  return state;

 default:
  return state;
 }
}

我将我的操作声明为：

import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Swivlr } from '../../Models/swivlr.model'

export const ADD_SWIVLR    = '[SWIVLR] Add'
export const REMOVE_SWIVLR = '[SWIVLR] Remove'

export class AddSwivlr implements Action {
  readonly type = ADD_SWIVLR

  constructor(public payload: Swivlr) { }
}

export class RemoveSwivlr implements Action {
  readonly type = REMOVE_SWIVLR

  constructor(public payload: number) { }
}

export type Actions = AddSwivlr | RemoveSwivlr

在我的 app.module.ts 我有：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { reducer } from '../Services/Reducers/swivlr.reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ swivlr : reducer }),
    StoreDevtoolsModule.instrument({
      maxAge: 25 //  Retains last 25 states
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 不喜欢我的 StoreModule.forRoot({ swivlr: reducer }) 代码行

我收到的错误是：

Error: src/app/app.module.ts:15:27 - error TS2322: Type '(state: Swivlr[] | undefined, action: Actions) => Swivlr[]' is not assignable to type 'ActionReducer<Swivlr[], 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 'RemoveSwivlr'.

15 StoreModule.forRoot({ swivlr : reducer }), ~~~~~~

src/Services/Actions/swivlr.actions.ts:17:15 17 constructor(public payload: number) { } ~~~~~~~~~~~~~~~~~~~~~~ 'payload' is declared here.

Answer 1

在您的代码中，您可以使用 StoreModule.forRoot(reducer) 见下文 https://stackblitz.com/edit/angular-webcontainer-template-era8cj?file=src%2Fapp%2Freducer.ts

我无法在 app.module 中为 ngrx 注册我的减速器

I cannot Register my reducer in app.module for ngrx

angular

ngrx