0

Я делаю магазин книг. Сделал большею часть функционала по видеоуроку, но вижу магазин можно дополнить. Подскажите как сделать функцию добавление товара в корзину и чтобы был счетчик на корзине сколько добавилось товаров.

reducer разделён на 2 части.

shopping-cart.js

const updateCartItems = (cartItems, item, idx) => {

  if (item.count === 0) {
    return [
      ...cartItems.slice(0, idx),
      ...cartItems.slice(idx + 1)
    ];
  }

  if (idx === -1) {
    return [
      ...cartItems,
      item
    ];
  }

  return [
    ...cartItems.slice(0, idx),
    item,
    ...cartItems.slice(idx + 1)
  ];
};

const updateCartItem = (book, item = {}, quantity) => {

  const {
    id = book.id,
    count = 0,
    title = book.title,
    total = 0 } = item;

  return {
    id,
    title,
    count: count + quantity,
    total: total + quantity*book.price
  };
};

const updateOrder = (state, bookId, quantity) => {
  const { bookList: { books }, shoppingCart: { cartItems }} = state;

  const book = books.find(({id}) => id === bookId);
  const itemIndex = cartItems.findIndex(({id}) => id === bookId);
  const item = cartItems[itemIndex];

  const newItem = updateCartItem(book, item, quantity);
  return {
    orderTotal: 0,
    cartItems: updateCartItems(cartItems, newItem, itemIndex)
  };
};

const updateShoppingCart = (state, action) => {

  if (state === undefined) {
    return {
      cartItems: [],
      orderTotal: 0
    }
  }

  

  switch(action.type) {
    case 'BOOK_ADDED_TO_CART':
      return updateOrder(state, action.payload, 1);

    case 'BOOK_REMOVED_FROM_CART':
      return updateOrder(state, action.payload, -1);

    case 'ALL_BOOKS_REMOVED_FROM_CART':
      const item = state.shoppingCart.cartItems.find(({id}) => id === action.payload);
      return updateOrder(state, action.payload, -item.count);

    default:
      return state.shoppingCart;
  }
};

export default updateShoppingCart;

book-list.js

const updateBookList = (state, action) => {

    if (state === undefined) {
      return {
        books: [],
        loading: true,
        error: null
      };
    }
  
    switch (action.type) {
      case 'FETCH_BOOKS_REQUEST':
        return {
          books: [],
          loading: true,
          error: null
        };
  
      case 'FETCH_BOOKS_SUCCESS':
        return {
          books: action.payload,
          loading: false,
          error: null
        };
  
      case 'FETCH_BOOKS_FAILURE':
        return {
          books: [],
          loading: false,
          error: action.payload
        };
  
      default:
        return state.bookList;
    }
  };
  
  export default updateBookList;

actions index.js

const booksRequested = () => {
  return {
    type: 'FETCH_BOOKS_REQUEST'
  }
};

const booksLoaded = (newBooks) => {
  return {
    type: 'FETCH_BOOKS_SUCCESS',
    payload: newBooks
  };
};

const booksError = (error) => {
  return {
    type: 'FETCH_BOOKS_FAILURE',
    payload: error
  };
};

export const bookAddedToCart = (bookId) => {
  return {
    type: 'BOOK_ADDED_TO_CART',
    payload: bookId
  };
};

export const bookRemovedFromCart = (bookId) => {
  return {
    type: 'BOOK_REMOVED_FROM_CART',
    payload: bookId
  };
};


export const allBooksRemovedFromCart = (bookId) => {
  return {
    type: 'ALL_BOOKS_REMOVED_FROM_CART',
    payload: bookId
  };
};


const fetchBooks = (bookstoreService, dispatch) => () => {
  dispatch(booksRequested());
  bookstoreService.getBooks()
    .then((data) => dispatch(booksLoaded(data)))
    .catch((err) => dispatch(booksError(err)));
};

export {
  fetchBooks
};

на данный момент 2 товара из сервиса

export default class BookstoreService {

  
    data = [
      {
        id: 1,
        title: 'Production-Ready Microservices',
        author: 'Susan J. Fowler',
        price: 32,
        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/41yJ75gpV-L._SX381_BO1,204,203,200_.jpg'},
      {
        id: 2,
        title: 'Release It!',
        author: 'Michael T. Nygard',
        price: 45,
        coverImage: 'https://images-na.ssl-images-amazon.com/images/I/414CRjLjwgL._SX403_BO1,204,203,200_.jpg'}
    ];

    getBooks() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.75) {
            resolve(this.data);
          }
        }, 700);
      });
    }

}

2
  • В каком месте вы попытались это сделать и что не получилось? 15 окт 2021 в 15:36
  • В этом проекте есть home page и cart page(пустой, на него можно перейти кликнув по корзине) Я могу добавить заказ на главной странице. Решил перенести эту функцию на cart page. Все работает, но как сделать чтобы каждый раз при клике на add to cart корзина отображала счетчик заказов - я не могу понять. Большего сказать не могу, я новичок в редаксе. Если интересно ссылка весь проект вот тут github.com/Raccoondriver/Javascript-Projects/tree/main/Book-app
    – Тимур
    15 окт 2021 в 16:39

1 ответ 1

0

Для добавления счетчика на корзине сколько добавилось товаров необходимо в компоненте AppHeader получать items из Redux. Далее имея товары в корзине мы можем отображать их колличество. Получается примерно так:

import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";

import cartIcon from "./shopping-cart-solid.svg";
import "./app-header.scss";

const AppHeader = ({ total }) => {
  const items = useSelector((state) => state.items);
  console.log(`items`, items);

  const itemsInCartCount = items.length;

  return (
    <header className="header">
      <Link to={"/"} className="header__link">
        Menu
      </Link>
      <Link to="/cart" className="header__link">
        <img className="header__cart" src={cartIcon} alt="cart"></img>
        Total: {total} $
        {!!itemsInCartCount && <span> Items in cart: {itemsInCartCount}</span>}
      </Link>
    </header>
  );
};

export default AppHeader;
5
  • Спасибо! Как оказалось из-за своей невнимательности я кинул ссылку не на тот проект, но повезло - там схожая ситуация была. Думаю дальше сам справлюсь.
    – Тимур
    16 окт 2021 в 11:42
  • Пожалуйста! Отметь ответ как правильный если всё работает, спасибо. 16 окт 2021 в 13:01
  • В общем попробовал и пока что-то не получается. Прошу еще раз простить меня за мою невнимательность, но если будет несложно покажите решение вот ссылка на проект github.com/Raccoondriver/Javascript-Projects/tree/main/book-app и я в долгу не останусь) заранее спасибо
    – Тимур
    16 окт 2021 в 13:14
  • Каждый проект нужно добавлять в отдельный репозиторий, чтобы не получалась каша в итоге. Это две одинаковые ссылки . Добавьте код в отдельный репозиторий на гитхаб, и сбросьте ссылку проекта. При копировании Book-app и book-app мой компьютер не видит разницу. 16 окт 2021 в 13:58
  • github.com/Raccoondriver/Redux-App
    – Тимур
    16 окт 2021 в 15:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.