How can I use dispatch in a connectDropTarget component?

[dreamcog]

when I use react-DND , found a problem.

question, I wanna to use dispatch in a connectDropTarget component.

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          component.localHandleMove(todo.todo_id);
      }
      return {};
  }
};


function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}
export default class TodoList extends Component {

    constructor(props) {
        super(props);
        this.localHandleMove = this.localHandleMove.bind(this);
    }

    localHandleMove(todo_id)  {
        this.props.dispatch(actions.completeTodo(todo_id,this.props.board_id))
    }

    render() {
        const { connectDropTarget } = this.props;
        //                  
        return connectDropTarget(
            <ul className="todo-list">
            {this.props.todos.map(function(todo){
               return <Todo key={todo.todo_id} todo={todo} />
            })}
            </ul>
        );
    } 
}


export default flow(
  connect(),
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect)
)(TodoList);

when I wrote like this.

Uncaught TypeError: component.localHandleMove is not a function

I wanna how could I use dispatch in a component?

thanks

[dreamcog]

finally, i found could be doing like this:

const dropTodoTarget = {
      drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
    component.store.dispatch(actions.moveTodoBoard(todo.todo_id,todo.board_id,props.board_id));
      }
      return {};
  }
};

[gaearon]

No, component.store is an instance variable that is a private API and not documented anywhere. It might be gone in any version of React Redux so please don’t rely on it.

What you want is to put connect() after DropTarget() so that props injected by connect() (including dispatch) are available to you in the drop target:

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

[shem86]

What you want is to put connect() after DropTarget()...

Isn't it suppose to come before?

[gl2748]

No, component.store is an instance variable that is a private API and not documented anywhere. It might be gone in any version of React Redux so please don’t rely on it.

What you want is to put connect() after DropTarget() so that props injected by connect() (including dispatch) are available to you in the drop target:

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

What is flow here?