Question

我拥有的模块包含以下行。 connect似乎有两对括号。这是什么意思？

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

示例：

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都是纯函数，分别提供了状态“ state”和“ dispatch”。此外，这两个函数都必须返回一个对象，然后将其键作为它们所连接的组件的props传递。

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

连接的组件（已导出）将todo和destroyTodo提供为TodoItem的道具。

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

Answer 2

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

如果将其拆分，它可能会变得更清晰：

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

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

此语法的含义是导出默认的connect（mapStatetoProps，mapDispatchToProps）（LandingComponent）

2 个答案: