04: Implement cart¶
Cart is the first truly interactive part of the shop we'll implement.
Client-side state management¶
Imagine a user puts a product in a cart. This changes several parts of the app, like the cart icon in the top right corner or the stock amount still available for purchase.
As the components rendering those piece of UI can be in different parts of the application, a state management library is commonly used: something like Redux or MobX. We find MobX to be the simplest option and will use it in this tutorial.
Cart MobX store¶
Create stores/CartStore.ts
:
// TODO
Make it available to the app via a React hook:
// TODO _app.js etc.
Update the UI with the "Add to Cart" button:
// TODO
Add an item to cart:
// TODO
React to changes in the cart icon:
// TODO
Also update the items in stock available:
// TODO
Congratulations, at this point, the e-shop behaves like a fully client-side application: user actions are reflected immediately in various places.
Next, you'll update the cart server-side and implement checkout.