This.props.action is not a function

Question

Just started writing custom stuff with Redux and I'd like to pass an input into my action.

(Also using this tutorial: https://www.youtube.com/watch?v=kNkTQtRUH-M)

Basically, I'd like to pass a phone number (in the example: '+1**********') to my action using this.props.testUserPhone('+1**********'), but I get a this.props.testUserPhone is not a function error.

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.

phonepage.js

@connect(
    state => ({
        testUserPhone: state.phonepage.testUserPhone
    }), 
    { testUserPhone }
)

class PhonePage extends Component {
    componentDidMount() {
        this.props.testUserPhone('+1**********')
    }
    
    render() {
        console.log(this.props.testUserPhone('+1**********'))
        return(
          // Render stuff
        )
    }
}

actions.js

import { UserAPI } from '../../constants/api'

const userAPI = new UserAPI()

export const TEST_USER_PHONE = 'TEST_USER_PHONE'

export const testUserPhone = (user) => ({
    type: TEST_USER_PHONE,
    payload: userAPI.testPhone(user)
})

reducer.js

import {
    TEST_USER_PHONE
} from './actions'

const INITIAL_STATE = {
    testedByPhone: {
        data: [],
        isFetched: false,
        error: {
            on: false,
            message: null
        }
    }
}

export default (state = INITIAL_STATE, action) => {
    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
    }
}

reducers.js

import { combineReducers } from 'redux'

import {
    phonereducer
} from '../scenes'

export default combineReducers({
    phonepage: phonereducer
})

Answer 1

I wasn't paying attention and missed that you need babel transform legacy decorators to actually use this.

npm install --save-dev babel-plugin-transform-decorators-legacy

and then

{
    "presets": ["react-native"],
    "plugins": ["transform-decorators-legacy"]
}