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

by

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.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. React Context vs React Redux, when should I use each one? [closed]
  3. Await is a reserved word error inside async function
  4. How to overcome the CORS issue in ReactJS
  5. How to update single value inside specific array item in redux
  6. Why use Redux over Facebook Flux? [closed]
  7. Understanding React-Redux and mapStateToProps()
  8. Is this the correct way to delete an item using redux?
  9. React: how to load and render external html file?
  10. Updating nested data in redux store
  11. Cleaner/shorter way to update nested state in Redux?
  12. How do I access store state in React Redux?
  13. redux fetch body is not use with no cors mode
  14. Read Store’s Initial State in Redux Reducer
  15. How to sync Redux state and url hash tag params
  16. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  17. How to trigger off callback after updating state in Redux?
  18. Changing the layout of a component depending on Redux state
  19. Cannot update a component while rendering a different component warning
  20. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  21. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  22. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  23. Programmatically change Redux-Form Field value
  24. Global state in React Native
  25. Redux Presentational Components Vs Container Component
  26. How can I dispatch function in redux?
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment