0 votes
in ReactJS by

Whats the purpose of at symbol in the Redux connect decorator?

1 Answer

0 votes
by

The @ symbol is in fact a JavaScript expression used to signify decorators. Decorators make it possible to annotate and modify classes and properties at design time.

Let's take an example setting up Redux without and with a decorator.

  • Without 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)
  • With 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
    }

The above examples are almost similar except the usage of decorator. The decorator syntax isn't built into any JavaScript runtimes yet, and is still experimental and subject to change. You can use babel for the decorators support.

Related questions

+1 vote
asked Jan 20, 2022 in JAVA by rajeshsharma
0 votes
asked Dec 14, 2023 in ReactJS by rahuljain1
...