redux-actions-better.js

// action.js
const fireAction = item => ({ type: 'ACTION', payload: { item } });

// Option 1
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { getItems } from './selectors';
function MyComponent({ item, fireAction, randomProp }) {
  const fireActionWithItem = useCallback(() => fireAction(item), [item]);
  return (
    <React.Fragment>
      <button onClick={fireActionWithItem}>{item}</button>
      <ExpensiveComponent onClick={fireActionWithItem} />
    </React.Fragment>
  )
}

const mapDispatchToProps = { 
  fireAction
}

export default connect(null, mapDispatchToProps)(MyComponent);

// -------------------------------------------------------------- 

// Option 2
import React from 'react';
import { connect } from 'react-redux';
import { getItems } from './selectors';
function MyComponent({ item, fireActionWithItem, randomProp }) {
  return (
    <React.Fragment>
      <button onClick={fireActionWithItem}>{item}</button>
      <ExpensiveComponent onClick={fireActionWithItem} />
    </React.Fragment>
  )
}

const createFireAction = createSelector(
  dispatch => dispatch, 
  item => item, 
  (dispatch, item) => () => dispatch(fireAction(item))
);

const mapDispatchToProps = (dispatch, ownProps) => ({ 
  fireActionWithItem: createFireAction(dispatch, ownProps.item)
})

export default connect(null, mapDispatchToProps)(MyComponent);

Seems option2 is missing import { createSelector } from 'reselect'