this.props.action 不是函数答案

【问题标题】：This.props.action is not a functionthis.props.action 不是函数
【发布时间】：2017-03-25 19:40:49
【问题描述】：

刚开始使用 Redux 编写自定义内容，我想将输入传递给我的操作。

（同样使用本教程：https://www.youtube.com/watch?v=kNkTQtRUH-M）

基本上，我想使用this.props.testUserPhone('+1**********') 将电话号码（在示例中：'+1**********'）传递给我的操作，但我收到了this.props.testUserPhone is not a function 错误.

我在这里做错了什么？我觉得有一种特定的方法可以使用我丢失的参数执行函数，或者我的绑定错误或其他什么。

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
})

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

我没有注意并且错过了您需要 babel transform legacy 装饰器才能实际使用它。

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

然后

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

【讨论】：

【解决方案2】：

您的代码存在绑定问题，您在 action.js 中创建的名为“testUserPhone”的操作是在您尝试调用它的组件中导入的注释。

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
        )
    }
}

以上代码只是从容器调度动作的一种方法，还有更多方法可以做到这一点。
@connect 接受参数 mapStateToProps 和 mapDispatchToProps。两者都是函数，在 mapStateToProps 中，您可以在组件中指定全局状态的哪一部分，在 mapDispatchToProps 中指定您希望将哪个操作作为道具传递给您的组件，以便您可以通过调度适当的操作来更改全局状态。
希望这会有所帮助.... :)

【讨论】：