Access state props in `mapDispatchToProps`

I was wondering why it is not possible to access state-derived props in mapDispatchToProps. For instance, given the following mapStateToProps function:

const mapStateToProps = (state, props) => {
  return {
    quota: state.quota,
  };
};

I would like to access props.quota in the corresponding mapDispatchToProps:

const mapDispatchToProps = (dispatch, props) => {
  return {
    unlockItem(item_id) {
      if (props.quota > 0) {
        dispatch(unlockItem(item_id));
      }
    },
  };
};

And if it is possible, how. Because I tried and could not. And I could not find anything about it in the documentation.

[jimbolla]

You can’t access state in mDTP. But you can in mergeProps, so your connect would look something like:

connect(
  state => ({ quota: state.quota }),
  { unlockItem }.
  (stateProps, dispatchProps, ownProps) => ({
    ...ownProps,
    ...stateProps,
    ...dispatchProps,
    unlockItem(item_id) {
        if (stateProps.quota > 0) {
          dispatchProps.unlockItem(item_id)
        }
    }
  })
)(YourComponent)

I myself typically use recompose library to do is a slightly different way. I’d do:

compose(
  connect(
    state => ({ quota: state.quota }),
    { unlockItem }
  ),
  withHandlers({
    unlockItem: => props => item_id => {
      if (props.quota > 0) {
        props.unlockItem(item_id);
      }
    }
  })
)(YourComponent)

One of the advantages of withHandlers is that it passes the same method to YourComponent every re-render, allowing it to optimize out of re-renders if it implements shouldComponentUpdate.

[markerikson]

On the flip side, I personally tend to write a method on the component that explicitly takes a value from props and calls a bound action creator:

onDoSomeThingClicked() {
    const {someItemID} = this.props;
    this.props.doSomeThing(someItemID);
}