How to implement cart in pure React? (useReducer and useContext hooks)

In this video, you will learn how to read and write state from the #Context API. I will use #React #Hooks for that.

0:00:00 - Intro
0:02:30 - Context Provider
0:07:00 - reducer implementation
0:10:00 - read state from Context
0:13:00 - "ADD" action
0:15:00 - dispatch actions from components
0:18:00 - remove item from Cart
0:23:00 - calculate total price with reduce()

[tekskilldev]

Man you did a great job putting a cart functionality together in 25 minutes. Awesome! The font being small and in cadesandbox, really needs closer look at it. Great job!!!

[macetaa]

Dude you are amazing at teaching thanks you!! greeting from Argentina

[VindexTOS]

really usefull video time to get into useReducer more

[passsacaglia]

Dzieki bardzo Artur! This was very good, is this part of a series or so? Just found this video :) new sub!

[dudzpedra]

Really awesome! Thanks for the detailed explanations, it makes all the diference!

[malekguedda]

i like your way of explanation, thank you for sharing such knowledge

[Cyd_Goblin]

Can we get a link to the initial codesanbox so we can follow along the video?

[MysterKnajt]

Jaki jest cel w rozdzieleniu „items” i „dispatch” do dwóch osobnych hooków ? Tyczą się tej samej rzeczy, także można by wrzucić do jednego hooka który zwraca obiekt składający się właśnie ze stanu i dispatcha.

[MysterKnajt]

Mam takie pytanie, które nurtuje mnie podczas codzienniego developmentu. Dot. useState.
Załóżmy, że mam stan [example, setExample] o wartości true (stan z useState ofc). Teraz chcę ustawić setExample(true). Czy potrzebuje do tego dodatkowego warunku sprawdzający czy jest sens zmieniac stan ? Mam na myśli: if(!example) setExample(true), czy jeżeli zrobię bez if, to React sobie to tam zoptymalizuje i nie będzie zmieniał stanu ? A może lepiej setExample(prevState => prevState ? prevState : true) ?
Boję się rozwiązania if(!example) setExample(true), gdyż wiadomo, że podczas setExample wartość example może być inna, niż podczas if(example) - chociaz dla tego przykladu jest maly sens, ale to z powodu uproszczenia przykładu.

[kamilpienkos]

Może kolejny odcinek o integracji Paypal?

[szczeczaczoszczeczek]

Pytanie mam. Czemu użyłeś do usuwania index zamiast na przykład id i usunąłeś za pomocą splice zamiast filter? Nie rozumiem. Celowo tak zrobiłeś pokazując tylko mechanizm useContext i useReducer, a resztę na szybko? Poza tym w porządku film.

Tak sobie myślę jeszcze czy przy [...state, action.item] w praktyce używa się cloneDeep z lodash lub ramdy?

[mattfly]

jakie to jest trudne do zrozumienia.. nic nie rozumiem 🤷 jak zes sie tej czarnej magii nauczyl?

[kamilpienkos]

Pomysł na kolejny odcinek: obsługa płatności kryptowalutami na stronie internetowej.