React-dnd: 使用 redux connect 和 DropTarget 映射

我会这样做：

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

在 React DnD 文档中， @gaearon使用 _.flow 来装饰具有多个更高级别组件的组件。 因此，如果我没看错，我们实际上可以使用 redux 中的compose函数，对吗？

@ekeric13 Redux 的compose与带有反向参数的_.flow相同。 那是，

compose(f, g, h)(x) === flow(h, g, f)(x) === f(g(h(x)))

@gaearon使用compose对我来说很好用，但我注意到compose的文档说传递给 compose 的大多数函数都应该期望一个参数，但我们能够将三个参数传递给DropTarget 。 为什么这样做？

撰写（...函数）

从右到左组合函数。

这是一个函数式编程实用程序，为了方便起见，它包含在 Redux 中。
您可能希望使用它来连续应用多个商店增强器。

参数

（参数）：要组合的函数。 每个函数都应该接受一个参数。 它的返回值将作为参数提供给左侧的函数，依此类推。 例外是最右边的参数，它可以接受多个参数，因为它将为生成的组合函数提供签名。

BuilderArea.propTypes = {
  addPanel: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  panels: state.panels
});

export default compose(
  DropTarget(Types.PANEL_CARD, builderAreaTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  })),
  connect(
    mapStateToProps,
    { addPanel }
  )
)(BuilderArea);