Estou aprendendo a reagir e seguindo alguns tutoriais, me deparei com este código:

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 => ({ todos: state.todos }))

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

    return (
      <div id="todo-list">
        <TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} />

        <TodosForm
          {...bindActionCreators(TodoActions, dispatch)} />
      </div>
    );
  }
}

Esta é uma aplicação de tarefas e esta é a página principal, carrega mais 2 pequenascomponents. Eu entendi quase tudo, mas não consegui algumas coisas:

O queconnect Faz? Eu sei que você precisa passar 4 parâmetros (eu não consegui exatamente o que são essas 4 variáveis).Como é a implementação de@connect decorador, como será o código após a transpilação?

Desde já, obrigado :)