title: @ngrx actions with multiple payloads
body: <p>I am creating a web app using Angular 4 and @ngrx 4 and I am having a problem configuring strong typed actions.</p>
  
  <p>I am new to @ngrx and I created the following class for my actions:</p>
  
  <pre><code>export const ActionTypes = {
    LOAD_PRODUCT_TREE: 'load-product-tree',
    LOAD_PRODUCT_TREE_COMPLETE: 'load-product-tree-complete'
  };
  
  // Load product tree by Id.
  export class LoadProductTreeAction implements Action {
    type = ActionTypes.LOAD_PRODUCT_TREE;
    constructor (public payload: number) { }
  }
  
  export class LoadProductTreeCompleteAction implements Action {
    type = ActionTypes.LOAD_PRODUCT_TREE_COMPLETE;
    constructor (public payload: Map&lt;number, Node&gt;) { }
  }
  
  export type Actions = LoadProductTreeAction | LoadProductTreeCompleteAction;
  </code></pre>
  
  <p>However when I try to use these actions in my reducer:</p>
  
  <pre><code>export interface State {
    productTree: Map&lt;number, Node&gt;;
  }
  
  const initialState: State = {
    productTree: new Map&lt;number, Node&gt;()
  };
  
  export function productTreeReducer(state = initialState, action: productTreeOperations.Actions): State {
  
    switch (action.type) {
      case productTreeOperations.ActionTypes.LOAD_PRODUCT_TREE:
        return state;
  
      case productTreeOperations.ActionTypes.LOAD_PRODUCT_TREE_COMPLETE:
        return { productTree: action.payload };
  
      default:
        return state;
    }
  
  }
  </code></pre>
  
  <p>I get this error: <code>Type '{ productTree: number | Map&lt;number, Node&gt;; }' is not assignable to type 'State'. Types of property 'productTree' are incompatible. Type 'number | Map&lt;number, Node&gt;' is not assignable to type 'Map&lt;number, Node&gt;'. Type 'number' is not assignable to type 'Map&lt;number, Node&gt;'.</code> in this line: <code>return { productTree: action.payload };</code></p>
  
  <p>How can I create a set of actions that take different payloads / arguments?</p>
  
  <p>Also what would be the best practice for the return value of the <code>LOAD_PRODUCT_TREE</code> action in the reducer? Should I return the current state while the information is being loaded from the backend, or should I return something else?</p>