What is the use of @connect decorator in react-redux
<p>I am learning React and following a few tutorials, I came across this code: </p>

<pre><code>import React                  from 'react';
import TodosView              from 'components/TodosView';
import TodosForm              from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions       from 'actions/TodoActions';
import { connect }            from 'react-redux';

@connect(state =&gt; ({ todos: state.todos }))

export default class Home extends React.Component {
  render() {
    const { todos, dispatch } = this.props;

    return (
      &lt;div id="todo-list"&gt;
        &lt;TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} /&gt;

        &lt;TodosForm
          {...bindActionCreators(TodoActions, dispatch)} /&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>This is a todo application and this is the main page, it loads 2 more small <code>components</code>. I understood almost everything but I couldn't get few things:</p>

<ul>
<li>What does <code>connect</code> do? I know you have to pass 4 params(I couldn't exactly get what are those 4 variables though).</li>
<li>How is the implementation of <code>@connect</code> decorator, how the code will look like after transpiling?</li>
</ul>

<p>Thanks in advance :)</p>