Вообще, вопрос вы задали достаточно интересный. Однако проблема в том, что ответ на него достаточно массивный, если конечно отвечать полностью.
Потому, к сожалению, придётся немного сократить.
Представим, у вас есть небольшой магазин, где присутствует несколько товаров. Например, это будут простые телефоны. Структура одного товара довольно простая: картинка, название, описание и кнопка купить.
Под капотом всё обстоит немного иначе. У нас будет массив, внутри которого есть объекты с данными. В объект будет входить: название продукта, описание продукта, картинка на продукт и уникальный идентификатор. Пример одного объекта будет немного ниже.
{
id: 0,
name: "Nokia 3310",
description: "Телефон, переживший падение в жерло вулкана",
url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
price: 2800
}
Поскольку React приложения являются одностраничными, потому-то и называются SPA, что в переводе на нормальный “single page application”. У нас будет несколько страниц: первая страница с продуктами, где можно приобрести какой-то товар, а вторая страница — это простая корзина.
Думаю, с роутингом проблем не должно возникнуть. Однако, если те возникнут, можете посмотреть это видео. На
английском, на
русском.
Теперь определимся.
При нажатии на кнопку «Купить» должно произойти действие. Продукт, который мы купили должен попасть в корзину, а при переключении на страницу корзины показываться на странице. Возникает вопрос, как это сделать?
Ответ довольно простой: создать пустой массив, в который мы и будем скандировать все купленные продукты. И именно данный массив и будет отображаться на странице корзины. Объект купленного продукта будет, например, таким.
{
id: 0,
name: "Nokia 3310",
description: "Телефон, переживший падение в жерло вулкана",
url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
price: 2800,
count: 1
}
На странице у нас будет несколько кнопок. Первая отвечает за удивление продукта из корзины, вторая за добавление ещё одного товара, и последняя за удаление одного товара. При каждом нажатии, мы будет обращаться к массиву с объектами и искать нужный элемент. Если он есть, то при покупке, изменять его count, добавляя один. Как это будет происходить?
Расскажу про алгоритм добавления элемента в массив:
- При нажатии, мы будет получать его идентификатор.
- Затем проходимся по массиву через цикл find получаем сам объект.
- В конце записываем полученный объект в массив. (P.S. Запомните одно важное правило, поскольку в React или Redux нельзя изменять состояние, использовать push следует крайне осторожно. В данном случае использовать push не стоит, пригодиться spread-оператор).
Хоть и написал в ответе, продублировать здесь лишним не будет. Утром не смог добавить пример. Однако, исходя из вашего изначального вопроса о магазине, написал простенький пример.
Скажу сразу,
повторение кода в примере сознательное. Если будете делать нечто такое самостоятельно, избегайте повторение кода, поскольку это может повлиять на поддержку приложения. Да и вообще, повторять код не есть хорошо, если тот конечно не сознательно повторённый.
Сам пример:
CodeSandbox (Cart) 
