title: Unable to dispatch redux action in Typescript
body: <p>I intend to create a simple counter using react redux in typescript.</p>
  
  <p>I have defined my store with actions and reducers in the following manner but not sure how to invoke dispatch with a specific action</p>
  
  <pre><code>import * as React from 'react';
  import { createStore, Action, Reducer } from 'redux';
  
  export interface CounterState {
      counter: number;
  }
  
  export enum ActionTypes {
      INCREMENT = 'increment',
      DECREMENT = 'decrement'
  }
  
  export interface IncAction { type: ActionTypes.INCREMENT }
  export interface DecAction { type: ActionTypes.DECREMENT }
  
  export type CounterAction = IncAction | DecAction;
  
  const reducer: Reducer&lt;CounterState&gt; = (state: CounterState = {counter: 0}, action: CounterAction) =&gt; {
      switch (action.type) {
          case ActionTypes.INCREMENT:
              return { ...state, counter: state.counter + 1};
          case ActionTypes.DECREMENT:
              return { ...state, counter: state.counter - 1};
          default:
              return state;
      }
  };
  
  let store = createStore(reducer, { counter: 0 });
  </code></pre>
  
  <p>Following is how my react component <code>Counter</code> looks like</p>
  
  <pre><code>interface IProps {}
  
  interface IState {}
  
  export default class Counter extends React.Component&lt;IProps, IState&gt; {
  
  private unsubscribe: Function;
  
  constructor(props: IProps, context?: any) {
      super(props, context);
  }
  
  componentDidMount() {
      this.unsubscribe = store.subscribe(() =&gt; this.render());
  }
  
  componentWillUnmount() {
      this.unsubscribe();
  }
  
  render() {
      const { counter } = store.getState();
      return (
          &lt;div&gt;
              &lt;p&gt;
                  &lt;label&gt;Counter: &lt;/label&gt;&lt;b&gt;#{counter}&lt;/b&gt;
              &lt;/p&gt;
              &lt;button onClick={e =&gt; store.dispatch('increment') }&gt;+&lt;/button&gt;
              &lt;span style={{ padding: "0 5px" }} /&gt;
              &lt;button onClick={e =&gt; store.dispatch('decrement') }&gt;-&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I am getting following error -</p>
  
  <blockquote>
    <p>ERROR in [at-loader] ./src/components/Counter.tsx:63:54
        TS2345: Argument of type '"increment"' is not assignable to parameter of type 'AnyAction'.</p>
    
    <p>ERROR in [at-loader] ./src/components/Counter.tsx:65:54
        TS2345: Argument of type '"decrement"' is not assignable to parameter of type 'AnyAction'.</p>
  </blockquote>