title: Registering reducer in app.module shows error in angular ngrx state management
body: <p>I am creating an application in Angular 12 and the latest NgRx library for turorial purposes. I have the below model, action, reducer, and app state class.</p>
  <p><strong>Model</strong></p>
  <pre><code>export interface Tutorial {
    name: string;
    url: string;
  }
  </code></pre>
  <p><strong>Actions</strong></p>
  <pre><code>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
  </code></pre>
  <p><strong>Reducer</strong></p>
  <pre><code>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;
      }
  }
  </code></pre>
  <p><strong>App State</strong></p>
  <pre><code>import { Tutorial } from &quot;./_models/tutorial.model&quot;;
  
  export interface AppState {
      readonly tutorial: Tutorial[];
  }
  </code></pre>
  <p>Now I would like to import the reducer in the <strong>app.module.ts</strong> file. Here is the code:</p>
  <pre><code>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 { }
  </code></pre>
  <p>But in the <strong>app.module.ts</strong> file, importing reducer is causing an error. The error is shown below:</p>
  <blockquote>
  <p>Error: src/app/app.module.ts:19:29 - error TS2322: Type '(state:
  Tutorial[] | undefined, action: Actions) =&gt; Tutorial[]' is not
  assignable to type 'ActionReducer&lt;Tutorial[], Action&gt;'.   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'.</p>
  <p>19       StoreModule.forRoot({ tutorial: reducer }),
  ~~~~~~~~</p>
  <p>src/app/_actions/tutorial.actions.ts:20:17
  20     constructor(public payload: number) {}
  ~~~~~~~~~~~~~~~~~~~~~~
  'payload' is declared here.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/KEyLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEyLt.png" alt="enter image description here" /></a></p>
  <p>As I am new in NgRx, I don't understand why the problem is happening. Please help me to solve the problem.</p>