React Redux - 无法尝试使用React-DnD和mapDispatchToProps

问题描述 投票:1回答:1

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

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

考虑我的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()方法:

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)函数。因此,在数小时尝试使其工作之后,我开始直接通过父组件(ServiceList)将dropService函数作为prop传递:

{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时是否有任何限制,或者我做错了什么?

任何帮助将不胜感激,我不能为这个怀疑而死。先感谢您。

javascript reactjs redux react-dnd
1个回答
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);
© www.soinside.com 2019 - 2024. All rights reserved.