Carrito de compras sencillo, usando Vite, React y reducers.

El primer proyecto que logré concluir fue el de una funcionalidad de agregar al carrito. Para esta página web simple, primero añadí NPM y Node. Con Node podemos instalar distintas librerías y a su vez una forma eficiente de compartir código JavaScript, para usarlo necesitamos instalar el gestor de paquetes de Node, NPM.
Una vez instalado, podemos instalar el paquete que nos concierne. Como tal se pude utilizar React para crear páginas web flexibles, adaptables. En este caso lo utilizamos a partir de Vite, una herramienta de desarrollo de proyectos que utiliza React, y también puede añadir otros paquetes como TypeScript, que utilizaremos más adelante.
A partir de aquí, terminamos de instalar las configuraciones iniciales y nos podemos adentrar en el cuerpo de la aplicación. Conocemos aquí conceptos imprescindibles de React, como los hooks. El hook useReducer en React es una alternativa a useState que se utiliza para manejar estados mas complejos y transiciones de estado que involucran lógica mas complicada. Mientras que useState es perfecto para el manejo de estados simples, useReducer es mas adecuado para situaciones donde el nuevo estado depende del estado anterior o cuando hayan múltiples subvalores o lógica condicional a considerar.
Ej: const [state, dispatch] = useReducer(reducer,initialState);
State: Estado cuya lógica se maneja dentro del reducer
initialState: es el state inicial con el que es creado el reducer, este initialState es similar a los valores de inicio del useState
Actions: las acciones son las funciones que manejan toda la lógica para modificar tu state.
Payload: Es la información que modifica tu state.
Displatch: Es la función que manda llamar la acción con el payload.
Utilizando el reducer, creamos state para el carrito y con este buscamos, mapeamos e iteramos para encontrar el estado del carrito. Finalmente creamos el build y lo subimos a una nube. Luego lo pasamos a TypeScript, como una forma didactica de desarrollarlo de ambas formas.
A continuación anexo la página web donde esta levantado esta actividad: Vite + React + TS + useReducer
Subscribe to my newsletter
Read articles from Sergio Mendoza directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
