title: This.props.action is not a function
body: <p>Just started writing custom stuff with Redux and I'd like to pass an input into my action. </p>
  
  <p>(Also using this tutorial: <a href="https://www.youtube.com/watch?v=kNkTQtRUH-M" rel="nofollow noreferrer">https://www.youtube.com/watch?v=kNkTQtRUH-M</a>)</p>
  
  <p>Basically, I'd like to pass a phone number (in the example: '+1**********') to my action using <code>this.props.testUserPhone('+1**********')</code>, but I get a <code>this.props.testUserPhone is not a function</code> error. </p>
  
  <p>What am I doing wrong here? I feel like there's a specific way to do functions with parameters that I'm missing, or my binding is wrong or something.</p>
  
  <pre><code>phonepage.js
  </code></pre>
  
  <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>@connect(
      state =&gt; ({
          testUserPhone: state.phonepage.testUserPhone
      }), 
      { testUserPhone }
  )
  
  class PhonePage extends Component {
      componentDidMount() {
          this.props.testUserPhone('+1**********')
      }
      
      render() {
          console.log(this.props.testUserPhone('+1**********'))
          return(
            // Render stuff
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>actions.js
  </code></pre>
  
  <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 { UserAPI } from '../../constants/api'
  
  const userAPI = new UserAPI()
  
  export const TEST_USER_PHONE = 'TEST_USER_PHONE'
  
  export const testUserPhone = (user) =&gt; ({
      type: TEST_USER_PHONE,
      payload: userAPI.testPhone(user)
  })</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>reducer.js
  </code></pre>
  
  <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 {
      TEST_USER_PHONE
  } from './actions'
  
  const INITIAL_STATE = {
      testedByPhone: {
          data: [],
          isFetched: false,
          error: {
              on: false,
              message: null
          }
      }
  }
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch(action.type) {
          case '${TEST_USER_PHONE}_PENDING':
              return INITIAL_STATE
          case '${TEST_USER_PHONE}_FULFILLED':
              return {
                  testedByPhone: {
                      data: action.payload,
                      isFetched: true,
                      error: {
                          on: false,
                          message: null
                      }
                  }
              }
          case '${TEST_USER_PHONE}_REJECTED':
              return {
                  testedByPhone: {
                      data: [],
                      isFetched: true,
                      error: {
                          on: true,
                          message: 'Error when fetching testedByPhone'
                      }
                  }
              }
          default:
              return state
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>reducers.js
  </code></pre>
  
  <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 { combineReducers } from 'redux'
  
  import {
      phonereducer
  } from '../scenes'
  
  export default combineReducers({
      phonepage: phonereducer
  })</code></pre>
  </div>
  </div>
  </p>