Отправка действия в подключенном компоненте

Question

У меня есть подключенный компонент, с которого я пытаюсь отправить действие clear, которое выглядит так:

import {createElement} from 'react';
import reduce from 'lodash/fp/reduce';
import {connect} from 'react-redux';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faShoppingCart} from '@fortawesome/free-solid-svg-icons';
import {clear} from '../../action/cart';
import * as products from '../../data/items';
import Heading from '../Heading';
import styles from './styles.css';
import Item from '../Item';

const Cart = ({total, items}) => (
  <div>
    <button onClick={clear}>Clear all items</button>
    <table className={styles.cartItems}>
      <tbody>
        {items.map(({...item}, id) =>
          (<Item {...item} key={id} />))}
        <tr>
          <td colSpan={4}>
            {items.length > 0 ?
              <div className={styles.total}>${total}</div> :
              <div>Your cart is empty</div>
            }
          </td>
        </tr>
      </tbody>
    </table>
  </div>
);

export default connect((state) => {
  return {
    items: state.cart.items,
    total: reduce(
      (sum, {id, quantity}) => sum + products[id].price * quantity,
      0,
      state.cart.items
    ).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'),
  };
})(Cart);

По какой-то причине действие clear не вызывается ввсе остальные действия есть.В редукторе это выглядит так:

[CLEAR_ITEMS]: () => ({
  items: [],
}),

Answer 1

Вам необходимо предоставить сопоставление из избыточного dispatcher в props вашего <Cart /> компонента, добавив это к вашему вызову в connect():

export default connect((state) => {
  return {
    items: state.cart.items,
    total: reduce(
      (sum, {id, quantity}) => sum + products[id].price * quantity,
      0,
      state.cart.items
    ).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'),
  };
}, 
/* Add this */ 
(dispatch) => {
   return {
       dispatchClear : () => dispatch(clear())
   }
})(Cart);

Теперь вы можете отправитьclear() действие для вашего редуктора путем настройки вашего <Cart/> компонента следующим образом:

/* Add dispatchClear now that it's mapped to props of your Cart component */
const Cart = ({total, items, dispatchClear}) => (
  <div>
    <button onClick={dispatchClear}>Clear all items</button>
    <table className={styles.cartItems}>
      <tbody>
        {items.map(({...item}, id) =>
          (<Item {...item} key={id} />))}
        <tr>
          <td colSpan={4}>
            {items.length > 0 ?
              <div className={styles.total}>${total}</div> :
              <div>Your cart is empty</div>
            }
          </td>
        </tr>
      </tbody>
    </table>
  </div>
);