React-Redux @connect syntax error

Question

I'm new to using React and Redux, I'm building a simple todos application. I am writing my application using the create-react-app tool in the command line.

The issue

I went to other blogs and post and others have mentioned that I am missing an npm plugin to transform decorators "transform-decorators-legacy", I added this to my dependencies along with Babel, but I am still receiving the same error.

Syntax error: Unexpected token (9:0)

   7 | import './App.css';
   8 |
>  9 | @connect((store) => {
     | ^
  10 |   return {
  11 |     user: store.user.user
  12 |   }

My code

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

import Todos from './components/Todos';
import Todo from './components/Todo';

import './App.css';

@connect((store) => {
  return {
    user: store.user.user
  }
})
class App extends Component {
  constructor(){
    super()
    this.state = {
      name: 'Brad',
      todos: [
        {
          id: '001',
          name: 'Take out trash',
          completed: false
        },
        {
          id: '002',
          name: 'Meeting with boss',
          completed: false
        },
        {
          id: '003',
          name: 'Go out to dinner',
          completed: false
        }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <Todos name={this.state.name} todos={this.state.todos}/>
        <Todo/>
      </div>
    );
  }
}

export default App;

My dependencies

package.json

{
  "name": "react-redux-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.3.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Any help/knowledge will be appreciated thanks!

Answer 1

Please note that both the React and Redux teams generally discourage the use of decorators. Instead, in this case you should use connect() as a function:

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Answer 2

Try like this:

const stateMap = (state) => {
    console.log('state', state);
    return {
        //something from state
    };
};

export default connect(stateMap)(App);

Answer 3

First I'd note that I agree with @markerikson's answer, use the function instead of the decorator.

If you did want to use decorators though, there would be a couple more steps involved. You've added the plugin to your dependencies, but not told Babel to use it.

Create React App uses Webpack with Babel under the hood, namely, in react-scripts. You need to adjust that Babel configuration. The "Create React App" way to do this is to eject from Create React App and then edit .babelrc - see https://babeljs.io/docs/plugins/transform-decorators/#usage-via-babelrc-recommended-