React Redux - проблема при попытке использовать React-DnD и mapDispatchToProps

Question

Мне было интересно, почему я не могу заставить некоторые свои компоненты работать с использованием ReactDnD и mapDispatchToProps.

Я пытаюсь перетащить Сервисы на Клиентов, но не могу найти свои функции отправки вреквизит в моем serviceSpec на методе endDrag.

Учитывая мой mapDispatchToProps для моего компонента Service:

const mapDispatchToProps = (dispatch) => ({
  dragService: (service) => { dispatch(dragService(service)) },
  dropService: (service, clientTarget) => { dispatch(dropService(service, clientTarget)) }
});

Функции высшего порядка для связывания вместе DragSource + Service + State + Dispatch:

var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(Service);
export default DragSource('service', serviceSpec, collect)(reduxConnectedService);

render ()Метод:

render (){
    const { isDragging, connectDragSource, service } = this.props;
    return connectDragSource(
      <a className="panel-block is-active">
        <CategoryIcon category={service.category}/>
        {service.name} | ${service.price}
      </a>
    )
  }

Объект спецификации, используемый для реализации спецификации dragSource ( здесь есть проблема ):

const serviceSpec = {
  beginDrag(props) {
    return props.service;
  },
  endDrag(props, monitor, component){
    console.log(props);
  }
}

console.log в функции endDrag простопоказать мой объект службы, потому что он возвращается функцией beginDrag:

{service: {…}}

Но мой план состоял в том, чтобы отправить действие dropService здесь на endDrag, но я не смог.В документации сказано, что (http://react -dnd.github.io / реагировать-dnd / docs / api / drag-source ):

beginDrag (реквизиты, монитор, компонент): Необходимые.Когда начинается перетаскивание, вызывается beginDrag.Вы должны вернуть простой объект JavaScript, описывающий перетаскиваемые данные.То, что вы возвращаете, является единственной доступной для целей перетаскивания информацией об источнике перетаскивания, поэтому важно выбрать минимальные данные, которые им нужно знать.Вы можете испытать желание вставить в него ссылку на компонент, но вам следует очень стараться избегать этого, потому что он соединяет источники перетаскивания и отбрасывает цели.Хорошей идеей будет вернуть что-то вроде {id: props.id} из этого метода.

Я не верю, что должен возвращать функцию dropService (dispatch) в определении beginDrag.Поэтому после нескольких часов, пытаясь заставить его работать, я начал передавать функцию dropService как реквизит непосредственно через родительский компонент (ServiceList):

{this.props.filteredServices.map((service, index) => (
     <Service service={service} key={service.name} dropService={this.props.dropService}/>
))}

Сделав так, я мог бы отправить действие dropService в методе endDragКак я и хотел, console.log может доказать, что:

{service: {…}, dropService: ƒ}

Я мог бы заставить это работать, но я не могу понять, почему я не мог заставить это работать, используя mapDispatchToProps.Есть ли какие-либо ограничения при использовании React-DnD или я что-то не так делаю?

Буду признателен за любую помощь, я не могу умереть с этим сомнением.Заранее спасибо.

Answer 1

Ваша проблема с этими двумя строками:

var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(Service);
export default DragSource('service', serviceSpec, collect)(reduxConnectedService);

Обратите внимание на порядок: вы помещаете Service в контейнер Redux.Затем вы оборачиваете контейнер Redux контейнером DragSource.Таким образом, в дереве компонентов контейнер перетаскивания является родительским контейнера Redux, что означает, что он не получает реквизиты Redux от него.

Чтобы исправить это, сделайте контейнер перетаскивания дочерним контейнера Redux.Вы можете сделать это, просто поменяв местами звонки DragSource() и connect():

var dragService = DragSource('service', serviceSpec, collect)(Service);
var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(dragService);