in React JS by
Q:

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.

Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked Jun 19, 2020 in React JS by JackTerrance
0 votes
asked Mar 4, 2020 in React JS by JackTerrance
0 votes
asked Dec 10, 2019 in Interview Question by rajeshsharma
0 votes
0 votes
asked Jun 19, 2020 in React JS by JackTerrance
0 votes
asked Mar 3, 2020 in React JS by miceperry
0 votes
0 votes
...