这个ES6代码有什么作用？

Question

我正在查看源代码附带的redux todomvc示例,并且有一些我以前没见过的JavaScript表示法.我熟悉ES6 export语法,但不明白这段代码片段末尾的导出语句是做什么的.为什么App类与connect函数的结果相结合？

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

它是两个链式函数调用. connect(mapStateToProps, mapDispatchToProps)被调用,返回一个新的函数值.使用单个参数调用第二个函数值App.

使用中间变量可能有助于澄清发生了什么:

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

export default exportedVal;