1. Debe actualizar la base de datos cada vez que el usuario haga clic en el botón Agregar y actualizar el carrito en la base de datos.
2. Puede usar diferentes métodos de autenticación de usuario, como usar el método de inicio de sesión de Google, o puede crear una autenticación de usuario personalizada usando JWT (JSON Web Token).
3. Tener la información del carrito del usuario en el almacenamiento local hasta que el usuario realice el pedido no sería una buena idea, la información del carrito es información crítica para el usuario y no puede actualizar el carrito del usuario a todos los demás dispositivos donde el usuario ha iniciado sesión, y los datos del carrito también desaparecerán una vez que el usuario elimine los datos del navegador, lo que podría ser una pérdida significativa para la empresa.
4. En lugar de redux, puede usar el reductor de reacción con el contexto de reacción.

Pregunta muy interesante, responderé solo una parte, de lo contrario, será demasiado largo para leer :)

Ya sea que necesite realizar una llamada a la API para conservar el carrito del lado del servidor o simplemente hacerlo solo una vez que se haya realizado el pedido, es una cuestión relacionada con la lógica comercial de su aplicación en sí.

Haga una pregunta: "¿Quiero que mis usuarios puedan agregar artículos al carrito y ver/actualizar/editar su contenido incluso si inician sesión desde una máquina/navegador diferente?"

Si la respuesta es sí, entonces seguro que debe sincronizar su carrito con el servidor para que siempre sea consistente. Para este propósito, sugeriría tener una especie de cola, que tendrá la última versión del carrito modificado localmente, una vez que el usuario no realizó ninguna acción durante 2000 ms en su carrito, puede realizar una llamada API de manera segura y conservar la información del carrito. en tu base de datos.

Esto reducirá la carga de su servidor, porque las personas pueden incrementar la cantidad de artículos que tiene en el carrito haciendo clic 20 veces en el botón add , en este caso, en lugar de enviar 20 solicitudes al servidor una a la vez, simplemente retrasa el proceso de persistencia del carrito, hasta que el usuario deja de interactuar con su aplicación por una cantidad X de milisegundos.

Para empezar, quiero decir que me gustó mucho tu CSS :).

No tiene que usar una base de datos o redux para hacer un sistema de carrito, pero como puede adivinar, tienen buenas oportunidades.

VENTAJAS DE LA BASE DE DATOS :

1. Puedes mostrar el carrito del usuario en todos sus dispositivos.
2. El carrito del usuario siempre estará aquí mientras no lo elimine.
3. Puede acceder a los datos de todos los componentes. (difícil)
4. Es muy buena práctica para aprender.

DESVENTAJAS DE LA BASE DE DATOS :

1. Necesita una API, por lo que es difícil de configurar.
2. Su código será más complicado que otras opciones.

VENTAJAS REDUCIDAS

1. Es un poco fácil de configurar. No necesitas un nuevo proyecto.
2. Puede acceder a los datos de todos los componentes. (medio)

DESVENTAJAS REDUCIDAS

1. En realidad, realmente no conozco ninguna desventaja de redux :) (por favor, dime si lo sabes)

VENTAJAS DEL ALMACENAMIENTO LOCAL

1. Muy fácil
2. Puede acceder a los datos de todos los componentes. (fácil)

DESVENTAJAS DEL ALMACENAMIENTO LOCAL

1. No puedes mostrar el carrito de un usuario en otro dispositivo

No separé el almacenamiento de la sesión porque es lo mismo que el almacenamiento local . La única diferencia es que el almacenamiento de la sesión es por pestaña .

En mi opinión , deberías usar una base de datos . Sé que es una aplicación básica, pero puedes aprender muchas cosas al hacerlo de esta manera.

Y estas son mis recomendaciones:

1. cookies vs local vs almacenamiento de sesión

2. Sitio de comercio electrónico con backend