What's the '@' (at symbol) in the Redux @connect decorator?

Question

I am learning Redux with React and stumbled upon this code. I am not sure if it is Redux specific or not, but I have seen the following code snippet in one of the examples.

@connect((state) => {
  return {
    key: state.a.b
  };
})

While the functionality of connect is pretty straightforward, but I don't understand the @ before connect. It isn't even a JavaScript operator if I am not wrong.

Can someone explain please what is this and why is it used?

Update:

It is in fact a part of react-redux which is used to connects a React component to a Redux store.

I'm not familiar with Redux, but it looks like a decorator. medium.com/google-developers/… — Lee
I love how in this new JavaScript world you are staring at the code half of the time and thinking "what part of the language syntax is this?" — MK.
Lol, I'm way deep into redux and stuff now. But back then I didn't know the decorator syntax has nothing to do with redux. Its just JavaScript. Glad to see this question is helping a lot of people like me. :) — Salman
Apparently the redux team discourages the use of connect as a decorator at the moment github.com/happypoulp/redux-tutorial/issues/87 — Syed Jafri

Tanner Semerad Tanner Semerad · Accepted Answer · 2015-09-20T04:56:50

The @ symbol is in fact a JavaScript expression currently proposed to signify decorators:

Decorators make it possible to annotate and modify classes and properties at design time.

Here's an example of setting up Redux without and with a decorator:

Without a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

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

Using a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

Both examples above are equivalent, it's just a matter of preference. Also, the decorator syntax isn't built into any Javascript runtimes yet, and is still experimental and subject to change. If you want to use it, it is available using Babel.

What's the '@' (at symbol) in the Redux @connect decorator?

2 Answers