I’m creating simple application using React Redux. I want to use decorator to inject some methods in my component.. I saw similar code in other projects:

import React, { Component } from 'react';
import { connect } from 'react-redux';


@creatable
export default class BookDetails extends Component {

  render() {
    console.log(this.props);
    if (!this.props.Activebook) {
      return <div> please select book</div>
    }
    return (
        <div>{this.props.Activebook.title}</div>
    );
  }
}


function creatable() {
  return Create => {
    @connect(state=>({Activebook : state.ActiveBook}))
   class MyDecorator extends Component {
     render() {
       console.log('>>>>>>>>>>>>>');
    console.log(this.props);
       console.log('>>>>>>>>>>>>>');
       return (
         <div>
           <Create
              {...this.props}
           />
         </div>
       )
     }

   }
    return MyDecorator;
  }
}

Unfortunately the above code is not working. Why?

I’m creating simple application using React Redux. I want to use decorator to inject some methods in my component.. I saw similar code in other projects:

import React, { Component } from 'react';
import { connect } from 'react-redux';


@creatable
export default class BookDetails extends Component {

  render() {
    console.log(this.props);
    if (!this.props.Activebook) {
      return <div> please select book</div>
    }
    return (
        <div>{this.props.Activebook.title}</div>
    );
  }
}


function creatable() {
  return Create => {
    @connect(state=>({Activebook : state.ActiveBook}))
   class MyDecorator extends Component {
     render() {
       console.log('>>>>>>>>>>>>>');
    console.log(this.props);
       console.log('>>>>>>>>>>>>>');
       return (
         <div>
           <Create
              {...this.props}
           />
         </div>
       )
     }

   }
    return MyDecorator;
  }
}

Unfortunately the above code is not working. Why?

• javascript
• reactjs
• ecmascript-6
• decorator
• redux

• 1 Define "not working"? – loganfsmyth Commented Feb 22, 2016 at 17:21
• when I was testing this code it was showing me error near @ creatable Just I want working example as above.. – Shivanand Mitakari Commented Feb 22, 2016 at 17:34
• @user3126894 If you're getting an error, it should be provided in the description of the problem. – lux Commented Feb 22, 2016 at 17:45
• I have pushed code to repo github.com/shivamitakari1990/react-book can you please have look ?? – Shivanand Mitakari Commented Feb 23, 2016 at 4:31

2 Answers 2

Please note that we do not recommend using decorators for connecting components. You won’t find them anywhere in the official docs or examples.

Just because some community examples use them doesn’t mean it’s a good idea: the spec is still changing, the tooling support is flaky, and frankly, you don’t need decorators for connect() because they desugar to simple function calls.

For example, rather than

@connect(mapStateToProps)
class MyComponent extends Component {}

you should write

class MyComponent extends Component {}
MyComponent = connect(mapStateToProps)(MyComponent)

This way you won’t have to worry about them breaking until the proposal is part of the language.

I recommend you to stick to the conventions we use in the official Redux examples and be very cautious about adopting experimental syntax extensions.

Babel 6 doesn't support decorators with the es2015 preset, nor with the stage-0 preset. You'll have to add the babel-plugin-transform-decorators-legacy plugin to enable decorators:

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

And add to your plugins in .babelrc:

{
  "plugins": [
    "transform-decorators-legacy",
    ...
  ]
}

This is the easiest way I know of to get decorator support. They're not included in babel by default as they haven't actually been standardized yet.