I cannot Register my reducer in app.module for ngrx-CodePudding

I'm new to ngrx and am trying to follow a couple of examples. I'm using Angular 13 with ngrx 13.0.1.

My state is declared as:

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

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

I've declared my reducer as follows:

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;
 }
}

I have my Action declared as :

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

in my app.module.ts I have:

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 doesn't like my StoreModule.forRoot({ swivlr: reducer }) line of code

The error I receive is :

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.

CodePudding user response：

In your code, you can use StoreModule.forRoot(reducer) See below https://stackblitz.com/edit/angular-webcontainer-template-era8cj?file=src/app/reducer.ts