This.props.action is not a function - reactjs

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"]
}

Answer 2

Your code has a binding issue: the action named 'testUserPhone' which you have created in action.js is not imported in your component where you are trying to call it.
import {testUserPhone} from 'action.js'//plz correct the path according to your file structure
#connect(
state => ({
testUserPhone: state.phonepage.testUserPhone
}),(dispatch)=>{
return {testUserPhone:(user)=>{
dispatch(testUserPhone(user))
}
}
)
class PhonePage extends Component {
componentDidMount() {
this.props.testUserPhone('+1**********')
}
render() {
console.log(this.props.testUserPhone('+1**********'))
return(
// Render stuff
)
}
}
The above code is just one way to dispatch an action from a container, there are more ways to do the same.
#connect take to parameters mapStateToProps and mapDispatchToProps. Both are function ,in mapStateToProps you specify which part of global state you need in your component and in mapDispatchToProps you specify
which action you want to pass as a prop to your component ,So that you can change the global state by dispatching appropriate actions.