ReactJs: Container & Component structure usecase e-commerce

I Have make a e-commerce app with reactjs and i want refactor the structure of components because many redudant component so can make reusable component. I have read some components design structure like container concept but I still bit confused. there is a homepage like this. I draw it. [1]:https://ibb.co/WGHvCcH "homepage image"

Structure :
--Homepage
----Navbar
------Cart
----Product

Description :
1. Homepage contain navbar and product
2. navbar contain cart and others .., the cart is a icon with badge how much item type in cart ex : shampoo 1, pen 3 will produce 2, and if the cart's icon is clicked will show a tooltip contain a list of product in cart
3. product is list of products contain number of stock and other information of product

Goal :
product stock and item in cart have dependencies each other, I want to make a cart badge and product stok are reactivity (no refresh).

I have design 2 structure component, first is without redux and second with redux.

1. Without redux
[2]:https://ibb.co/nfPVzm1 "without redux"
Structure :
--Homepage (container have state product=[] and cart=[] and methods)
----navbar(component)
------cart(component)
----product(component)

2. With redux
[3]:https://ibb.co/vJKRtDb "with redux"
Structure :
Redux( product=[] and cart=[], actions)
--homepage (component)
----navbar(component)
------ContainerCart(container connect to redux)
--------cart(component)
----ContainerProduct(container connect to redux)
------product(component)

What i mean about component and container :
container : have state,methods and logic
component : just receive props state, method and just for displaying purpose

how is common patern in reactjs according to that case? is my design acceptable and suitable with container concept?

Thanx for any suggestion and explanation