React Redux - 尝试使用 React-DnD 和 mapDispatchToProps 时遇到问题

Question

我想知道为什么我不能使用 ReactDnD 和 mapDispatchToProps 让我的一些组件工作。

我正在尝试将服务拖放到客户端，但我无法在 endDrag 方法的 serviceSpec 的 props 中找到我的调度函数。

考虑我的 Service 组件上的 mapDispatchToProps：

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 (){
    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);
  }
}

endDrag 函数中的 console.log 只显示我的服务对象，因为它是在 beginDrag 函数上返回的：

{service: {…}}

但我的计划是在 endDrag 上分派 dropService 动作，但我不能。 文档说（ http://react-dnd.github.io/react-dnd/docs/api/drag-source ）：

beginDrag(props, monitor, component)：必需。 当拖动开始时，beginDrag 被调用。 您必须返回一个描述被拖动数据的普通 JavaScript 对象。 您返回的是有关拖放源的放置目标可用的唯一信息，因此选择他们需要知道的最少数据很重要。 您可能很想将组件的引用放入其中，但您应该尽量避免这样做，因为它耦合了拖动源和放置目标。 从这个方法返回类似 { id: props.id } 的东西是个好主意。

我不认为我应该在 beginDrag 定义上返回 dropService(dispatch) 函数。 因此，经过几个小时的尝试，我开始将 dropService 函数作为 prop 直接通过父组件 (ServiceList) 传递：

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

通过这种方式，我可以像我想要的那样在 endDrag 方法上调度 dropService 操作，console.log 可以证明：

{service: {…}, dropService: ƒ}

我可以让它工作，但我不明白为什么我不能使用 mapDispatchToProps 让它工作。 使用 React-DnD 有什么限制还是我做错了什么？

任何帮助将不胜感激，我不能因这种怀疑而死。 先感谢您。

Answer 1

你的问题是这两行：

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

注意顺序：将Service包装到 Redux 容器中。 然后用DragSource容器包装 Redux 容器。 因此，在组件树中，拖动容器是 Redux 容器的父容器，这意味着它不会从它接收 Redux 道具。

为了解决这个问题，让拖动容器成为 Redux 容器的子容器。 您可以通过简单地交换DragSource()和connect()调用来实现：

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