MapDispatchToProps passess undefined props
I have a seemingly trivial problem, 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));
};
}
No gaps are passed with this shorthand mapDispatchToProps note. If I use the full template format mapDispatchToProps then the missing character is passed.
What am I not seeing here?
+3
Roland Jegorov
source
to share
1 answer
Ok, so I did some more and found out that there is a circular dependency.
Utils ==> FooContainer ==> Ducks ==> Utils
Eliminating this dependency eliminates the problem initially run from undefined ducks
Hope anyone who is facing a similar issue is exempt from this answer. :)
+1
Roland Jegorov
source
to share