I recently met with a senior developer and we got on the topic of calling dispatch actions in Redux.
He said that, even for developers with more experience, it’s a frequent mistake to forget to call a dispatch action correctly by appending this.props to the function call. So simple, but apparently he sees it actually happen pretty often.
So, instead of a correct call like this inside a container (or ‘smart’) component:
this.props.getFetchedData()
Your call will look like this:
getFetchedData()
The way you’ll know that you’ve made this mistake is when it appears that your dispatch action just doesn’t execute ( possibly without any generated error). If you console.log() at different points inside your function, you’ll see that the action function will be called and will execute, but it stops executing at the line that contains the dispatch .
I’ve had this happen to me without any error to give me a hint at my mistake. It simply stopped executing when it hit the dispatch() . It was strange.
Remember that when you mapDispatchToProps() , or use the connect() helper function from react-redux, you’ve made your dispatch actions available as props, and therefore have to call them appropriately. Otherwise, you’re calling it as just a function, because you imported it into your component.
So hopefully if you understand why it happens, you’ll be more likely to remember the fix if (or when, apparently) it happens to you.
Here are some additional reading resources on the subject:
- Implementing Container Components (Redux.js.org)
- How to get simple dispatch from this.props using connect w/ Redux? (Stackoverflow)
- Connect: Dispatching Actions with mapDispatchToProps (React-Redux.js.org)