Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 399
Salman Avatar asked Oct 10 '22 12:10

Salman


People also ask

What is the purpose of at symbol in the Redux connect decorator?

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

What are different parts in Redux?

There are three building parts: actions, store, and reducers. Let's briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it's to be used.

How do you get the Redux state value in a functional component?

redux state can be accessed as prop in a function by using below format. 1: import { connect } from 'react-redux'; // log accepts logMessage as a prop function log(props) { const { environment, logMessage } = props; console. debug('environment' + environment + logMessage ); .... }


2 Answers

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.

like image 385
Tanner Semerad Avatar answered Oct 16 '22 20:10

Tanner Semerad


Very Important!

These props are called state props and they are different from normal props, any change to your component state props will trigger the component render method again and again even if you don't use these props so for Performance Reasons try to bind to your component only the state props that you need inside your component and if you use a sub props only bind these props.

example: lets say inside your component you only need two props:

  1. the last message
  2. the user name

don't do this

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

do this

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))
like image 51
Fareed Alnamrouti Avatar answered Oct 16 '22 21:10

Fareed Alnamrouti