title: NgRx store problem: Wrong types of params passing at reduecer function
body: <p>I would like to make a simple reducer work.
  I copied a code from: [coursetro.com][1] but something went wrong when I finished updating app.module.ts. it gaved me an error message</p>
  <blockquote>
  <p>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>
  </blockquote>
  <p>I assumed, from the error message, that I somehow try to pass in param 2, type Action to a function that accepts type Actions.
  I know that I pass type TutorialActions.Actions that it should be equal to type Action. But Maybe I should use casting it order to that to work because it it typed &quot;TutorialActions.Actions&quot; and not &quot;Action&quot; ?</p>
  <p>I would like to make this solution simple as possible.
  [1]: <a href="https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial---Learn-Angular-State-Management" rel="nofollow noreferrer">https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial---Learn-Angular-State-Management</a></p>
  <p>Some Code:
  reducer.ts</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>actions:</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>app.module.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs';
  import { Store } from '@ngrx/store';
  import { Tutorial } from './../models/tutorial.model';
  import { AppState } from './../app.state';
  
  @Component({
    selector: 'app-read',
    templateUrl: './read.component.html',
    styleUrls: ['./read.component.scss']
  })
  export class ReadComponent implements OnInit {
  
  
    tutorials: Observable&lt;Tutorial[]&gt;;
  
  
    constructor(private store: Store&lt;AppState&gt;) {
      this.tutorials = store.select('tutorial');
    }
    ngOnInit(): void {
    }
  
  }
  </code></pre>