Little experiment using React Native and Redux in order to create a basic, but effective shopping cart app.
In the next few words I'm going to show how was this project made.
App structure
The structure above talks about the main components workflow. There is nothing complex here, and the point (according to me) than deserves a explanation is the Cart list, because it use the same Product component than ProductList component, but there is a validation (showDetails prop) that allow show or not more details about the product, such as Quantity and Subtotal amount.
React Navigation The whole app workflow is controlling by react-navigation library. I think is the best (for now) resource in order to achieve a faster way to control every interface in an app. Also, is easy to implement and works pretty well.
Redux Despite there is a lot of strategies to communicate components in React, this time I use Redux because this app has some processing data stages that I need to show in every interfaces according to their own behavior when the user interact with the app, and this library works too good to control the data flow.
Interfaces
Main interface
I'm just going through the relevant points:
- A Badge component that shows how many items in total has the client chosen.
- Cart button that allows to the user go to the Cart list interface.
- White (or transparent) icon that indicates that there is still not items in the cart of this product.
- Black icon that indicates that there is at least one item in the cart of this product.
- Add product, and Remove product buttons.
Cart list interface
Again, I'm boing through the relevant details:
- Total products added to the cart.
- Total amount of the products added to the cart.
- Specific quantity of this product in the cart.
- Amount with the subtotal price of this product in the cart.
App working
