React-dnd: Использование redux connect вместе с отображением DropTarget

Я бы сделал это так:

import { compose } from 'redux'

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

В документации React DnD @gaearon использует _.flow для украшения компонента несколькими компонентами более высокого уровня. Итак, если я правильно это читаю, мы можем просто использовать функцию compose из redux, верно?

@ ekeric13 compose Redux идентичен _.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);