Как добавить действие в функциональный компонент, используя Redux и ReactJS

Question

Я пытаюсь добавить действие «addProduct» к компоненту.Но я вижу ошибку, когда нажимаю на нее, помогите мне справиться, заранее спасибо!

Я не понимаю, где моя ошибка (

import { bindActionCreators } from "redux";
import { addProduct } from "../actions/addProduct";

const ProductListItem = ({ product }) => {
  return (
    <div className="product">
      <img className="product_img" src={product.image} />
      <p>{product.name}</p>
      <p className="bold">$ {product.price}</p>
      <button className="add_card" onClick={() => addProduct(product)}>
        {" "}
        add to cart
      </button>
    </div>
  );
};

export default ({ products = [] }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} />;
  });


const mapDispatchToProps = dispatch => {
  return bindActionCreators({ addProduct }, dispatch);
};

connect(null,
  mapDispatchToProps
)(ProductListItem);
[enter image description here][1]

Answer 1

Я сделал несколько обновлений и включил пример того, что я делаю.

1. Похоже, вам нужно импортировать connect из react-redux
2. Вам нужно деструктировать addProduct из вашего реквизита, теперь вы нанесли на карту mapDispatchToProps
3. Я переопределил mapDispatchToProps, чтобы не использовать bindActionCreators, это просто вопрос предпочтений, но любой из них должен работать.
4. В вашем connect() я деструктурирую все оставшиеся реквизиты, используя ...rest и распространить это в возвращаемых в качестве реквизита.

..

Родитель

import React from "react"
import ProductListItem from "./ProductListItem"

const products = [1,2,3] <-- data might be in redux-state but I'll use this for simplicity.

const TestHolder = () => {
    return(
        <div>
            <ProductListItem products={products}/>
        </div>
    )
}

export default TestHolder

ProductListItem

import React from "react"
import { connect } from "react-redux"
import { addProduct } from "../../actions/testActions";

const ProductListItem = ({ product, addProduct }) => {
  return (
    <div className="product">
      <button className="add_card" onClick={() => addProduct()}>
        {" "}
        add to cart
      </button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    addProduct: (product) => {
      dispatch(addProduct(product))
    }
  }
};

export default connect(null, mapDispatchToProps)(({ products = [], ...rest }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} {...rest} />;
  }))

Создатель действий

export const addProduct = () => {
    return {
        type: "Woof"
    }
}

Возможно, вы исказили своего создателя действия и сделали его простым объектом вместо функции, возвращающей объект.

Answer 2

Чтобы правильно добавить ваше действие, вам необходимо сопоставить диспетчеризацию с вашим компонентом, используя функцию редукционного соединения.

function connect(mapStateToProps?, mapDispatchToProps?, ...)

Первый параметр используется для сопоставления состояния с реквизитами.

const mapStateToProps = state => {
    return { products: state.products, cart: state.cart };
};

const Item = connect(mapStateToProps)(MyItemComp)

Теперь в вашем компоненте у вас есть доступ к products и cart в качестве реквизита.К которому вы можете получить доступ, используя this.props.products

Второй параметр используется, чтобы разрешить вашему компоненту отправлять действия.

function mapDispatchToProps(dispatch) {
  return {
    addProduct: e => dispatch(addProduct(e))
  };
}

const Item = connect(mapStateToProps, mapDispatchToProps)(MyItemComp)

Теперь мы можем отправлять действия из нашего компонента, выполнив addProduct(product).

connect можно использовать как

// will only access props, won't dispatch any actions
const Item = connect(mapStateToProps)(MyItemComp)
// dispatch actions, won't access props
const Item = connect(null, mapDispatchToProps)(MyItemComp)
// will access props and dispatch actions
const Item = connect(mapStateToProps, mapDispatchToProps)(MyItemComp)

Теперь давайте исправим ваш компонент

 import { addProduct } from "../actions/addProduct";
 import { connect } from "react-redux";

// add addProduct as a second parameter, to be able to dispatch actions from here
const ProductListItem = ({ product, addProduct }) => {
  return (
    <div className="product">
      <img className="product_img" src={product.image} />
      <p>{product.name}</p>
      <p className="bold">$ {product.price}</p>
      <button className="add_card" onClick={() => addProduct(product)}>
       {" "}
       add to cart
      </button>
    </div>
  );
};

Изменим

export default ({ products = [] }) =>
  products.map((product, i) => {
  return <ProductListItem key={i} product={product} />;
});

на

// export ProductListItem
export default ({ products = [], addProduct }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} addProduct={addProduct}/>;
});

Теперь нам нужно прикрепить реквизит и диспетчер

// import the above export
import ProductListItem from './ProductListItem';

const ProductList = connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductListItem);

В вашем родительском компоненте

render() {
  ...
  return(
    <div>
      ...
      <ProductList />
      ...
    </div>
   )
}

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.0.3/react-redux.min.js"></script>
<script src="http://wzrd.in/standalone/uuid%2Fv1@latest"></script>
<link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
<style>
  .product {
     display: flex;
     flex-direction: row;
     border-bottom-style: solid;
     margin-bottom: 5px;
     margin-top: 10px;
   }

   img.product_img {
     width: 30px;
   }

   .badge {
     padding-left: 9px;
     padding-right: 9px;
     -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
     border-radius: 9px;
    }

    .label-warning[href],
    .badge-warning[href] {
      background-color: #c67605;
    }
    #lblCartCount {
      font-size: 12px;
      background: #ff0000;
      color: #fff;
      padding: 0 5px;
      vertical-align: top;
      margin-left: 1px;
    }
 </style>
    
 <div id="root"></div>
    
<script type="text/babel">
const { Provider, connect } = ReactRedux;
const { applyMiddleware, createStore, combineReducers } = Redux;

function addProduct(payload) {
  return { type: 'ADD_PRODUCT', payload };
}

const initialState = {
  products: [
    {
      id: 1,
      name: 'Avocado',
      price: 1.5,
      image: 'https://img.icons8.com/metro/26/000000/avocado.png',
      quantity: 0
    },
    {
      id: 6,
      name: 'Bread',
      price: 1,
      image: 'https://img.icons8.com/metro/26/000000/bread.png',
      quantity: 0
    },
    {
      id: 2,
      name: 'Milk',
      price: 1.8,
      image: 'https://img.icons8.com/metro/26/000000/milk-bottle.png',
      quantity: 0
    }
  ],
  cart: []
};

function rootReducer(state = initialState, action) {
  if (action.type == 'ADD_PRODUCT') {
    return {
      ...state,
      cart: [...state.cart, action.payload]
    };
  }
  return state;
}

const store = createStore(rootReducer);

const mapStateToProps = state => {
  return { products: state.products, cart: state.cart };
};

function mapDispatchToProps(dispatch) {
  return {
    addProduct: e => dispatch(addProduct(e))
  };
}

const CartItems = ({ cart }) => {
  return (
    <div>
      <i class="fa fa-shopping-cart" />
      <span class="badge badge-warning" id="lblCartCount">
        {cart.length}
      </span>
    </div>
  );
};

const ProductListItem = ({ product, addProduct }) => {
  return (
    <div className="product">
      <img className="product_img" src={product.image} />
      <p>{product.name}</p>
      <p style={{ marginLeft: 5, marginRight: 5 }} className="bold">${product.price}</p>
      <button className="add_card" onClick={() => addProduct(product)}>
        {' '}
        add to cart
      </button>
    </div>
  );
};

const Cart = connect(mapStateToProps)(CartItems);
const Products = ({ products = [], addProduct }) =>
  products.map((product, i) => {
    return <ProductListItem key={i} product={product} addProduct={addProduct}/>;
  });

const ProductList = connect(
  mapStateToProps,
  mapDispatchToProps
)(Products);

class App extends React.Component {
  render() {
    return (
      <div>
        <Cart />
        <ProductList />
      </div>
    );
  }
}
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
</script>