Redux вернуть полную цену в корзине - PullRequest
Новая
       6

Redux вернуть полную цену в корзине

0 голосов
/ 29 декабря 2018

Привет, мое приложение-редукс в настоящее время добавляет элементы корзины, но я бы хотел подсчитать общую стоимость.

Как я могу сделать это в редуксе?

В настоящее время мой Редуктор выглядит следующим образом. 

const cartItems = (state = [], action) => {
    switch (action.type)
    {
        case 'ADD_TO_CART':
        // console.log('CarItems.JS', action.payload)
            if (state.some(cartItem => cartItem.id === action.payload.id)) {
                // increase qty if item already exists in cart
                return state.map(cartItem => (cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty + 1 } : cartItem));
            }
            return [...state, { ...action.payload, qty: 1 }]; // else add the new item to cart

        case 'REMOVE_FROM_CART':
            return state
                .map(cartItem => (cartItem.id === action.payload.id ? { ...cartItem, qty: cartItem.qty - 1 } : cartItem))
                .filter(cartItem => cartItem.qty > 0);
    }
    return state
} 

export default cartItems

Решение

Рассчитать общую сумму и вернуть ее.

const mapStateToProps = (state) => {
    let totalPrice = 0;
    state.map((item) => { 
      totalPrice += item.price * item.qty;
    });
    return {
        cartItems: state,
        totalPrice : totalPrice
    }
}

вызовите его в представлении 

<Text style={styles.total}>Totaal: € {this.props.totalPrice}</Text>

1 Ответ

0 голосов
/ 31 декабря 2018

Вы захотите создать селектор для этого, который вы можете использовать из mapStateToProps.

Это будет выглядеть примерно так: 

function getTotalCost (state) {
  return state.reduce((result, item) => item.qty * item.price + result, 0); 
}

В вашем компоненте .. (I 'я не уверен, как структурировано ваше приложение или состояние, поэтому, вероятно, потребуется некоторая настройка) 

import { getTotalCost } from "./items/selectors";

const mapStateToProps = state => {
  return {
    totalCost: getTotalCost(state.items)
  }
}

class Component extends React.Component {
  render() {
    const { totalCost } = this props;
    ...
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Component)
...