javascript - 这段 ES6 代码做了什么？

Question

我正在查看源代码附带的 redux todomvc 示例，其中有一些我以前从未见过的 JavaScript 符号。我熟悉 ES6 export 语法，但不明白这段代码末尾的 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;