title: TypeError: Cannot read property of undefined mapStateToProps
body: <p>I have encountered an error while linking my component to the store. </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'errorMessage' of undefined</p>
  </blockquote>
  
  <pre><code>Function.mapStateToProps [as mapToProps]
  
    37 | const mapStateToProps = (state: AppState) =&gt; ({
  &gt; 38 |   errorMessage: state.errorRedux.errorMessage,
    39 |   error: state.errorRedux.error,
    40 | })
  </code></pre>
  
  <p>I cannot put my finger on what the issue is. It shouldn't be listening for the error as I've chosen to render the message conditionally.</p>
  
  <ol>
  <li>I have tried setting <code>errorMessage: string | undefined | null</code> to no success.</li>
  <li>I tried <code>errorMessage: "[INTERFACE"]</code> to no success.</li>
  <li>I tried <code>errorMessage?: string</code>
  I think the problem could lie somewhere in extending the ErrorHandlerProps interface but I have already extended the mapStateToProps?</li>
  </ol>
  
  <pre><code>import { Dispatch, Action } from "redux"
  import { connect } from "react-redux"
  import { AppState } from "reducers"
  import { showError } from "data/error_handler"
  
  class ErrorHandler extends React.Component&lt;
    ReturnType&lt;typeof mapStateToProps&gt; &amp; ReturnType&lt;typeof mapDispatchToProps&gt;
  &gt; {
    public render() {
      const { onShowError, error, errorMessage } = this.props
  
      let showTheError =
        this.props.error === true ? (
          &lt;Snackbar
            open={error}
            message={errorMessage}
            autoHideDuration={5000}
          /&gt;
        ) : null
  
      return (
        &lt;div&gt;
          &lt;RaisedButton onClick={onShowError} label="Toggle ErrorHandler" /&gt;
          {showTheError}
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state: AppState) =&gt; ({
    errorMessage: state.errorRedux.errorMessage,
    error: state.errorRedux.error,
  })
  
  const mapDispatchToProps = (dispatch: Dispatch&lt;Action&gt;) =&gt; {
    return {
      onShowError: () =&gt; dispatch(showError()),
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(ErrorHandler)
  </code></pre>
  
  <p><code>data/interfaces.ts</code></p>
  
  <pre><code>export interface ErrorHandlerProps {
    error: boolean
    errorMessage: string
  }
  </code></pre>
  
  <p><code>data/reducer.ts</code></p>
  
  <pre><code>import { ErrorHandlerProps, ActionTypes } from "./"
  
  const initialState: ErrorHandlerProps = {
    error: false,
    errorMessage: "",
  }
  
  export default (
    state: ErrorHandlerProps = initialState,
    action: ActionTypes
  ) =&gt; {
    switch (action.type) {
      case "SHOW_ERROR":
        return {
          ...state,
        }
      default:
        return state
    }
  }
  </code></pre>
  
  <p><code>reducers.ts</code></p>
  
  <pre><code>import { reducer as errorHandler, ErrorHandlerProps } from "data/error_handler"
  
  const appReducer = combineReducers({
    errorHandler
  } as any)
  
  export type AppState = {
    errorRedux: ErrorHandlerProps
  }
  </code></pre>
  
  <p><code>store.ts</code></p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from "redux"
  import { routerMiddleware } from "react-router-redux"
  import thunk from "redux-thunk"
  import rootReducer, { AppState } from "reducers"
  
  const initialState = {}
  const middleware = [thunk, routerMiddleware(history)]
  const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
  const store = createStore(rootReducer, initialState, composedEnhancers)
  
  export default store
  export const getState = () =&gt; store.getState() as AppState
  </code></pre>