Простое руководство, чтобы узнать, как использовать React и Redux для создания базового приложения для корзины покупок.
В последней части мы узнали, как отображать элементы и добавлять их в наш магазин Redux. На этот раз сделаем наоборот; мы удалим добавленные элементы из модели DOM и магазина в дополнение к добавлению (и вычитанию) количества через наш компонент корзины.
Чтобы добавить или вычесть количество, нам сначала нужно добавить события onClick так же, как мы делали раньше с функцией addToCart. Итак, внутри нашего файла Cart.js добавим следующий код (будет объяснен позже):
Чтобы объяснить это, мы просто возьмем один пример (добавление к количеству), поскольку все остальные примеры в значительной степени одинаковы;
Поэтому после нажатия на цель мы вызываем функцию addQuantity из свойств. Здесь нам понадобится функция mapDispatchToProps; Он в основном отправляет действие редуктору, а затем мы, конечно же, должны добавить эту функцию в качестве параметра в компонент connect.
ПРИМЕЧАНИЕ. Не забудьте добавить все упомянутые действия в файл cartActions, а затем импортировать их в корзину.
Теперь давайте внесем некоторые изменения в наш редуктор, чтобы все это работало;
Здесь я использовал оператор if, но обычно мы используем оператор switch.
Теперь мы собираемся отобразить нашу общую сумму. Для этого я создал еще один компонент под названием Рецепт. Итак, мы хотим импортировать нашу общую сумму из магазина и отобразить ее, а затем добавить или удалить эту доставку, верно? мы уже делали это несколько раз, так что теперь вы сможете сделать это самостоятельно!
Теперь займемся нашими действиями по доставке:
- Добавьте стоимость доставки из общей суммы:
if(action.type=== ADD_SHIPPING){
return{
...state,
total: state.total + 6
}
}
- Убрать доставку из общей суммы:
if(action.type=== SUB_SHIPPING){
return{
...state,
total: state.total - 6
}
}
А теперь итоговая сумма должна обновляться в зависимости от варианта доставки!
Однако следует учитывать, что, когда пользователь заходит на другую страницу и возвращается, флажок останется снятым, но значение итога не изменится. Это вызовет проблему; он будет продолжать добавлять стоимость доставки, даже если флажок не установлен из-за действия браузера по умолчанию. Чтобы решить эту проблему, мы могли бы просто добавить функцию componentWillUnmount ():
componentWillUnmount() {
if(this.refs.shipping.checked)
this.props.substractShipping()
}
Мы выбрали этот флажок, используя имя нашего исх. Мы уже добавили к нему атрибут ref, помните?
Полный код компонента Recipe здесь:
Не забудьте добавить его в компонент "Корзина".
Вот и все! Надеюсь, я дал вам небольшое представление об использовании React и Redux и лучшее понимание концепций, которые входят в Redux.
