unable to call the action method adddRecipe from container's addRecipe method

[Apps-23]

After completing the fifth video I am getting an error that says 'undefined is not a function(evaluating 'this.props.addRecipe()')

[Benouzef]

Same issue here.
Any idea ?
thanks for your help

[jlebensold]

@Benouzef did you use the connect() method from react-redux ? Can you provide sample code or a branch?

[Benouzef]

Hi @jlebensold,
Thanks for your feedback : I seem to be "messing around" with redux configuration. I have "copied" your app to play around with it and I have a nested component "below" app which is the container (your Home component basically).
I can't get a reference to 'this.props.addRecipe()' if I don't add : connect as well as mapDispatchToProps in the nested component.
I thought I had to pass mapDispatchToProps in the connect call only in the appContainer file.
Am I misunderstanding something or do you have to repeat the "export default connect(mapStateToProps, mapDispatchToProps)(Home)" in each component ?
I thought I could only do "connect(mapStateToProps)(Home)"
Thanks for your advice

[jlebensold]

Hi @Benouzef ,

There's no "magic" (e.g. IoC containers or DI) with Redux. when you call connect, you are basically wrapping your Home React component in a wrapper component that connects your React component to the Redux store. This is how the props become accessible to your component. In principle, you want to delineate which components are "smart" components that some understanding of global state and which components are "dumb" and just receive props and do whatever they need to do.