mapDispatchToProps passess undefined props

Question

I have a seemingly trivial issue, but for the life of me I can't figure it out.

FooContainer.tsx

...
public render() {
  ...

  this.props.onSubmit(123) // FooContainer.tsx:81 Uncaught TypeError: this.props.onSubmit is not a function
}
...
export interface FooDispatchToProps {
  onSubmit: (bar: number) => Thunk; // <- from redux-thunk
}
const mapDispatchToProps = {
  onSubmit: submitFoo, // a thunk. From SomeDuck.ts
};   
export const FooContainerConnected = connect<{}, FooDispatchToProps, {}>(
    undefined,
    mapDispatchToProps,
)(FooContainer);

SomeDuck.ts

export function submitFoo(bar: number): Thunk {
    return (dispatch, getState) => {
        dispatch(submitFooAction(bar));
    };
}

The prop is not being passed with this shorthand notation of mapDispatchToProps. If I use the full boilerplate format of mapDispatchToProps then the prop is passed.

What am I not seeing here?

Answer 1

Ok, so I did some more digging and found out that there's a circular dependency.

Utils ==> FooContainer ==> Ducks ==> Utils

Eliminating this dependency eliminates the issue that functions from ducks are initially undefined

Hope that whoever encounters a similar issue is relieved by this answer. :)