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

Posted 2023-02-19

【中文标题】我无法在 app.module 中为 ngrx 注册我的减速器

【英文标题】：I cannot Register my reducer in app.module for ngrx

【发布时间】：2022-01-11 04:13:23

【问题描述】：

我是 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;
 

我的 Action 声明为：

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 ) 代码行

我收到的错误是：

错误：src/app/app.module.ts:15:27 - 错误 TS2322：类型 '（状态： 旋转[] | undefined, action: Actions) => Swivlr[]' 不可赋值 键入“ActionReducer”。参数类型 “行动”和“行动”是不相容的。 类型“动作”不可分配给类型“动作”。 “Action”类型中缺少属性“payload”，但在“RemoveSwivlr”类型中是必需的。

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

src/Services/Actions/swivlr.actions.ts:17:15 17 构造函数（公共负载：数字） ~~~~~~~~~~~~~~~~~~~~~~ 'payload' 在这里声明。

【参考方案1】：

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

【讨论】：

非常感谢您消除了我的错误。这几天我一直在尝试解决这个问题。