What does this ES6 code do?

Question

I'm looking over the redux todomvc example that ships with the source and there's a bit of JavaScript notation that I haven't seen before. I'm familiar with the ES6 export syntax but don't understand what the export statement at the end of this code snippet is doing. Why is the App class being combined with the result of the connect function?

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Header from '../components/Header'
import MainSection from '../components/MainSection'
import * as TodoActions from '../actions'

class App extends Component {
  render() {
    const { todos, actions } = this.props
    return (
      <div>
        <Header addTodo={actions.addTodo} />
        <MainSection todos={todos} actions={actions} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

Answer 1

It is two chained function calls. connect(mapStateToProps, mapDispatchToProps) is called which returns a new function value. This second function value is called with the single argument App.

Using intermediary variables might help clarify what is going on:

let connectRet  = connect(mapStateToProps, mapDispatchToProps),
    exportedVal = connectRet(App);

export default exportedVal;