React-redux @connect 不起作用,但 connect() 可以

Posted

技术标签:

【中文标题】React-redux @connect 不起作用,但 connect() 可以【英文标题】:React-redux @connect does not work, but connect() does 【发布时间】: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 我认为装饰器语法默认已经包含了调度,并且通过传入你的动作它会自动链接 - 至少它是针对视频中的那个人的 【参考方案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 ], ]

【讨论】:

以上是关于React-redux @connect 不起作用,但 connect() 可以的主要内容,如果未能解决你的问题,请参考以下文章

深入理解Redux之手写React-Redux

react-redux connect 和 redux 数据的组件生命周期顺序

react-redux的connect()方法

React 学习笔记总结

React 学习笔记总结

P20:Redux进阶-React-redux中的Provider和connect