this.props.dispatch() undefined using recompose lifecycle({})

Question

So I'm trying to move my lifecycle methods into an HOC decorator using Recompose. Something like this...

export const fetchOptions= lifecycle({  
  componentDidMount() {
     this.props.dispatch(change('mainForm', 'orderHeader.proxies', this.props.currentSalesRepId));
  },

  componentDidUpdate(prevProps) {
    if (this.props.total != prevProps.total){
      this.props.dispatch(change('mainForm', 'totalPurchase', this.props.total));
    }
  }
 });

Then I'm trying to add it to my form component which renders all my markup. Like this.

export default compose(
  connect(mapState, mapDispatch),
  fetchOptions,
)(MainReduxForm)

I keep getting an error that this.props.dispatch is not a function... Any thoughts? I purposely kept this brief to avoid a text wall. If you need additional info just let me know!

Answer 1

The problem here is that the dispatch method will only be added automatically to your props if you don't provide a mapDispatchToProps function or in your case. mapDispatch

So you have two option, remove mapDispatch from your connect call.

export default compose(
  connect(mapState),
  fetchOptions,
)(MainReduxForm)

or if you are doing something inside your mapDispatch simply add dispatch to your return object

const mapDispatchToProps = (dispatch) => {
    return {
        dispatch,
        ...
        other dispatch functions here
        ...
        }
    }
}