This.props.action 不是函数

Question

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

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

基本上，我想使用 this.props.testUserPhone('+1**********') 向我的操作传递一个 phone 数字（在示例中：'+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
})

Answer 1

我没有注意并且错过了你需要 babel transform 遗留装饰器来实际使用它。

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

然后

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

Answer 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 中指定您想将哪个动作作为道具传递给您的组件，以便您可以通过调度适当的动作来更改全局状态。
希望这对您有所帮助.... :)

This.props.action 不是函数

This.props.action is not a function

reactjs

react-native

redux

react-redux