title: Property 'payload' is missing in type 'Action' but required in type 'AddItemAction'
body: <p>I have been trying to create a sample application to learn ngrx, my application has only one 'Action' ADD_ITEM and it has a reducer function which does operations on the state based on the action types.</p>
  <p><strong>shopping.actions.ts</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import { Action } from '@ngrx/store'
   import {ShoppingItem} from '../models/shopping-item.model'
  
   export enum ShoppingActionTypes{
       ADD_ITEM = '[SHOPPING] Add Item'
   }
  
   export class AddItemAction implements Action {
       readonly type = ShoppingActionTypes.ADD_ITEM
  
       constructor(public payload: ShoppingItem) { }
   }
  
   export type ShoppingAction = AddItemAction;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>shopping.reducer.ts</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//   import { ShoppingAction, ShoppingActionTypes } from "../actions/shopping-actions";
    import { ShoppingActionTypes, ShoppingAction } from "../actions/shopping.actions";
  
    import { ShoppingItem } from '../models/shopping-item.model';
  
  
  const initialState: Array&lt;ShoppingItem&gt; = [
    {
      id: "1775935f-36fd-467e-a667-09f95b917f6d",
      name: 'Diet Coke',
    }
  ];
  
  export function ShoppingReducer(state: Array&lt;ShoppingItem&gt; = initialState, action: ShoppingAction) {
    switch (action.type) {
      case ShoppingActionTypes.ADD_ITEM:
        return [...state, action.payload];
  
      default:
        return state;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>The issue occurs in app.module.ts</strong></p>
  <p><strong>app.module.ts</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { StoreModule } from '@ngrx/store';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ShoppingReducer } from './store/reducers/shopping.reducer'
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      StoreModule.forRoot({
        shopping: ShoppingReducer
      }),
      
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>ERROR</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Error: src/app/app.module.ts:16:7 - error TS2322: Type '(state: ShoppingItem[] | undefined, action: AddItemAction) =&gt; ShoppingItem[]' is not assignable to type 'ActionReducer&lt;ShoppingItem[], Action&gt;'.
    Types of parameters 'action' and 'action' are incompatible.
      Property 'payload' is missing in type 'Action' but required in type 'AddItemAction'.
  
  16       shopping: ShoppingReducer
           ~~~~~~~~
  
    src/app/store/actions/shopping.actions.ts:11:18
      11      constructor(public payload: ShoppingItem) { }
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      'payload' is declared here.</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks!</p>