React-redux @connect 不起作用，但 connect() 可以答案

【问题标题】：React-redux @connect does not work, but connect() doesReact-redux @connect 不起作用，但 connect() 可以
【发布时间】：2017-08-18 18:56:40
【问题描述】：

我无法使用@connect() 语法代替export default connect()

我注意到当我使用通常的语法时

class PhonePage extends Component { ... }

export default connect(state => ({
        testedByPhone: state.phonepage.testedByPhone
    }),
    (dispatch) => ({
        actions: bindActionCreators(testUserPhone, dispatch)
    })
)(PhonePage)

我在我的商店中正确注册了我的州。

它看起来像这样：Object {screenProps: undefined, navigation: Object, testedByPhone: Object}

但是当我使用 @connect 装饰器使事情变得更清洁时，我的状态中没有列出任何内容。

@connect(
    state => ({
        testedByPhone: state.phonepage.testedByPhone
    }), 
    { testUserPhone }
)
class PhonePage extends Component { ... }

export default PhonePage

突然之间，它实际上并没有连接起来：Object {screenProps: undefined, navigation: Object}

我做错了什么，使用我看到每个人都在使用的神奇@connect 装饰器的正确方法是什么？

其余代码，以防万一，以@connect的形式；

'use strict'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View,
  StatusBar,
  TouchableHighlight,
  Button,
  TextInput
} from 'react-native'
import { NavigationActions } from 'react-navigation'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { testUserPhone } from './actions'

import PhoneInput from 'react-native-phone-input'

@connect(
    state => ({
        testedByPhone: state.phonepage.testedByPhone
    }), 
    { testUserPhone }
)
class PhonePage extends Component {

    constructor(){
        super()
    }

    componentDidMount() {
        // this.props.testUserPhone
    }

    render() {
        console.log(this.props)
        return(
            ...
        )
    }
}

export default PhonePage

// export default connect(state => ({
//         testedByPhone: state.phonepage.testedByPhone
//     }),
//     (dispatch) => ({
//         actions: bindActionCreators(testUserPhone, dispatch)
//     })
// )(PhonePage)

// module.exports = PhonePage

【问题讨论】：

你在正确地转换装饰器吗？我们可以看看你的构建步骤吗？
@ZekeDroid 我真的不明白你的意思，“改造”他们？构建步骤？如果您告诉我如何为您获取这些信息，我会的。
@AndrewLi 根据本教程，您似乎不需要 dispatch 作为参数，这是youtube.com/watch?v=kNkTQtRUH-M&t=23m51s 的唯一原因
@ZekeDroid 等等，你是说我的 babelrc 文件吗？它只有 { presets: ["react-native"], "plugins": ["syntax-decorators"]}
@AndrewLi 我认为装饰器语法默认已经包含了调度，并且通过传入你的动作它会自动链接 - 至少它是针对视频中的那个人的

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

@connect 装饰器或一般的装饰器不是 JavaScript 原生的。但是，您可以通过 Babel 添加它们。

您可以阅读更多内容here

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

【讨论】：

我将我的作为插件添加到 Babel - 仍然没有帮助:(
@ARMATAV 你用的是哪个插件？
“语法装饰器”
我应该拥有哪一个？
@ARMATAV 试试 babel-plugin-transform-decorators-legacy

【解决方案2】：

对于 babel-6，请关注 @megaboy101 的回答

对于 babel-7 使用这个

{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ] }

【讨论】：