Как передать идентификатор продукта с избыточным счетом в реагировать нативно для электронной коммерции, как функция addtocart

Question

делает платформу, похожую на электронную коммерцию, и здесь я хочу add_to_cart и показать количество на иконке. и и с подсчетом показать продукт по идентификатору, который хранится в массиве

  this is my reducers :-
     const cartItems = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return [...state, action.payload]
        case 'REMOVE_FROM_CART':
            return state.filter(cartItem => cartItem.id !== action.payload.id)
    }

    return state
}

export default cartItems

, в котором я увеличиваю количество согласно выбранному элементу

const mapStateToProps = reduxStore => {
 return {
  cartItems: reduxStore
 }
}
const mapDispatchToProps = (dispatch) => {
    return {
        addItemToCart: (product) => dispatch({ type: 'ADD_TO_CART', payload: product })

    }
}

export default connect(mapStateToProps , mapDispatchToProps)(ContentPage)

только я получаю не считайте элементы корзины, и я хочу передать this.state.data.name && this.state.data.img, что с URL!

Answer 1

Для передачи дополнительных реквизитов, если это то, что вы спрашиваете, mapStateToProps также принимает дополнительные реквизиты

const mapStateToProps = (reduxStore, ...otherProps) => {
 return {
  cartItems: reduxStore
 }
}

, вы можете ссылаться на данные через this.props.cartItems

Answer 2

(Отредактировано) Попробуйте обновить состояние следующим образом:

const initialState = {
  cartItems: [],
};

const cartItems = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return { ...state, cartItems: state.cartItems.push(action.payload) };
    case 'REMOVE_FROM_CART':
      return {
        ...state,
        cartItems: state.filter(cartItem => cartItem.id !== action.payload.id),
      };

      return state;
  }
};

И иметь доступ к cartItems в подпорках:

const mapStateToProps = reduxStore => {
 return {
  cartItems: reduxStore.cartItems
 }
}