redux-actions-bad-2.js

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



// ExpensiveComponent.jsx
import React, { memo } from 'react';

function ExpensiveComponent({ onClick }) {
  return (
      <button onClick={onClick}>click me</button>
  )
}
export default memo(ExpensiveComponent);



// MyComponent.jsx
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 mapDispatchToProps = (dispatch, ownProps) => ({ 
  fireActionWithItem: () => dispatch(fireAction(ownProps.item)) 
});

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