2

I am unable to use the @connect() syntax in place of export default connect()

I've noticed that when I use the usual syntax

class PhonePage extends Component { ... }

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

I get my state properly registered in my store.

And it looks like this: Object {screenProps: undefined, navigation: Object, testedByPhone: Object}

But when I use the @connect decorator to make things cleaner, I don't get anything listed in my state.

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

export default PhonePage

Suddenly it's somehow not actually connecting things: Object {screenProps: undefined, navigation: Object}

What am I doing wrong, and what is the correct way to use the magical @connect decorator that I see everyone using?

The rest of the code, just in case it's needed, in the form of @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
ARMATAV
  • 604
  • 6
  • 26
  • Are you transforming decorators correctly? Can we see your build steps? – ZekeDroid Mar 25 '17 at 23:34
  • @ZekeDroid I don't actually know what you mean by that, 'transforming' them? Build steps? If you tell me how I can get that info for you I will. – ARMATAV Mar 25 '17 at 23:49
  • @AndrewLi It seems like you don't need dispatch as a param according to this tutorial, that's the only reason http://www.youtube.com/watch?v=kNkTQtRUH-M&t=23m51s – ARMATAV Mar 25 '17 at 23:50
  • @ZekeDroid Wait actually do you mean my babelrc file? All it has is { presets: ["react-native"], "plugins": ["syntax-decorators"]} – ARMATAV Mar 25 '17 at 23:54
  • @AndrewLi I think that the decorator syntax already includes the dispatch by default, and by passing in your action it's automatically linked up - at least it is for the guy in the video – ARMATAV Mar 25 '17 at 23:55

2 Answers2

3

The @connect decorator, or decorators in general, are not native to JavaScript. However, you can add them in via Babel.

You can read more on it here

npm install --save-dev babel-plugin-transform-decorators-legacy
Community
  • 1
  • 1
megaboy101
  • 91
  • 4
1

For babel-6, follow @megaboy101's answer

For babel-7 use this

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

Ramast
  • 7,157
  • 3
  • 32
  • 32