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

Question

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

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

考虑到我的服务组件上的 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() 方法：

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规范的spec对象（问题出在这里）：

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 函数作为道具直接通过父组件（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 容器的 parent，这意味着它不会从它那里接收 Redux props。

要解决这个问题，请将拖动容器设为 Redux 容器的 子。您可以通过简单地交换 DragSource() 和 connect() 调用来做到这一点：

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