这个语法是什么意思 export default connect(mapStatetoProps， mapDispatc

Question

我有一个模块包含以下行。 连接似乎有两对括号。这是什么意思？

export default connect(mapStatetoProps, mapDispatchToProps).    
(LandingComponent)

尝试查找各种文档

import { connect } from 'react-redux'
import { LandingComponent } from './Landing'
const mapStatetoProps = state => {
  return {}
}
const mapDispatchToProps = dispatch => {
  return {}
}
export default connect(mapStatetoProps, mapDispatchToProps)
(LandingComponent)

期望了解语法的含义。

Answer 1

第二组括号是因为connect(..., ...)返回一个函数。此函数是一个组件装饰器，这就是为什么它与登陆组件类一起调用的原因。

如果你把它分开，它可能会变得更清晰：

const decorate = connect(mapStatetoProps, mapDispatchToProps);
const ReduxConnectedLandingComponent = decorate(LandingComponent);
export default ReduxConnectedLandingComponent;

在这种情况下，decorate是一个接受单个组件并返回组件的函数，即它采用普通组件并返回一个更智能的组件，该组件从层次结构中最近的提供存储中提取道具。

Answer 2

示例：

const TodoItem = ({ todo, destroyTodo }) => {
  return (
    <div>
      {todo.text}
      <span onClick={destroyTodo}> x </span>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    todo: state.todos[0]
  }
}
const mapDispatchToProps = dispatch => {
  return {
    destroyTodo: () =>
      dispatch({
        type: 'DESTROY_TODO'
      })
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

mapStateToProps 和 mapDispatchToProps 都是分别提供给存储"状态"和"调度"的纯函数。此外，这两个函数都必须返回一个对象，然后其键将作为它们所连接的组件的 props 传递。

在这种情况下，mapStateToProps返回一个只有一个键的对象："todo"，mapDispatchToProps返回一个带有destroyTodo键的对象。

连接的组件(导出(提供待办事项和销毁托办事项作为 TodoItem 的道具。

来源： https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/