Действие отправляется только при вызове с помощью функции стрелки

Question

Я возился и читал документы, но не могу понять, почему это не работает.

У меня есть такой компонент:

import React from "react";
import {connect} from "react-redux";
import {
    pieceDropped,
} from "./BoardActions";

const Foo = (props) => (
    <Bar
        onDrop={(move) => props.onDrop(move)}
    />
);

const mapDispatchToProps = {
    onDrop: pieceDropped,
};

function mapStateToProps(state) {
    return {
        ...
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Foo)

Действие, определенное в другом месте:

export const pieceDropped = ({sourceSquare, targetSquare}) => ({
    type: PIECE_DROPPED,
    payload: {sourceSquare, targetSquare}
});

И редуктор, который имеет дело с этим диспетчером. В настоящее время это работает нормально.

Что я не понимаю, так это то, почему в компоненте, если я заменю функцию стрелки на более чистое назначение, например:

const Foo = (props) => (
    <Bar
        onDrop={props.onDrop}
    />
);

Мое действие больше не отправляется.

Я прочитал документы по редуксу и узнал о деструктурировании объектов в контексте функций, чтобы убедиться, что с диспетчером все в порядке, но я не могу понять, почему этот способ не работает.

Бар onDrop prop имеет следующую подпись:

  onDrop?: (obj: {sourceSquare: string, targetSquare: string, piece: string}) => void,