What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)

by

I found the accepted answer was not enough to help me sort this out, so I’m adding a little more detail to help others who find this.

The problem is that it’s unclear exactly what is the decorator. The decorator in the example given is not just the @ symbol, it’s the @connect function. Simply put, the @connect function is decorating the CounterApp class.

And what is it doing in this case? It’s connecting the state.counter value to the props of the class. Remember that in redux the connect function takes two arguments: mapStateToProps and mapDispatchToProps. In this example, it’s taking only one argument – mapStateToProps.

I haven’t investigated this too much, but this appears to be a way to encapsulate your state-to-props and dispatch-to-props mappings so they accompany your components rather than being located in a different file.

More Related Contents:

  1. Correct use of arrow functions in React
  2. Unable to use Arrow functions inside React component class [duplicate]
  3. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  4. React ‘cannot read property of undefined’ when using map
  5. How can I communicate between related react components?
  6. When to use functional setState
  7. How to pass data from a page to another page using react router
  8. How to call loading function with React useEffect only once
  9. Applying className/onClick/onChange not working on Custom React Component
  10. How to use componentWillMount() in React Hooks?
  11. React | How to detect Page Refresh (F5)
  12. How to loop and render elements in React.js without an array of objects to map?
  13. Do I have to store tokens in cookies or localstorage or session?
  14. When should I use brackets with imports
  15. How to handle calling functions on data that may be undefined?
  16. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  17. Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated
  18. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  19. Error: How to serialize data from getStaticProps : Next.js
  20. Update one of the objects in array, in an immutable way
  21. How to Set port in next.js
  22. What does useCallback/useMemo do in React?
  23. How to hide bottom navigation bar on a specific screen in react native?
  24. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  25. Bootstrap modal in React.js
  26. UseEffect being called multiple times
  27. Is it possible to pass context into a component instantiated with ReactDOM.render?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment