mapActions

Ya que estamos refactorizando nuestro código, hay algo que me gustaría comentarte. Aquí en ShoppingCart, a partir de nuestro cartStore, estamos haciendo uso de tres actions: decrement, increment y deleteProduct. ¿Cómo están definidos ellos? Cuando se llame a decrementQuantity, nosotros estamos llamando al método decrement de nuestro store. Cuando se llame a este método, nosotros llamamos a este otro de nuestro store. Cuando se llame a este método, hacemos lo mismo. En los tres casos recibimos el argumento y lo volvemos a pasar a nuestro store. Esto funciona y se entiende muy bien. Se entiende que son métodos que ocurren en este componente, como se puede ver aquí debajo, y se entiende que estamos delegando la ejecución de estas acciones al store. Sin embargo, esto puede parecer un poco repetitivo. Entonces vamos a seguir haciendo lo mismo, pero vamos a hacerlo a través de un helper que Pinia nos ofrece. Pinia, como bien sabes, es el framework que usamos para la gestión del estado de nuestro proyecto. Vamos a usar mapActions, mapActions nos permite mapear acciones con métodos. Si nosotros usamos mapActions, vamos a mapear acciones de nuestro store con métodos de nuestro componente. Ya que a final de cuentas eso es lo que estamos haciendo. Solo que todo este código se va a reducir. Aquí hay un ejemplo. Se está mapeando acciones de un counter store con métodos de este componente. Dentro de este componente, la acción increment del store se llama moar. Y la acción setCount se llama setIt. Entonces, cuando se quiere incrementar, se llama a este método moar. Y cuando se quiere setear un valor, en vez de usar setCount, se llama a setIt. esto es solo un ejemplo para demostrar que las acciones pueden tener un nombre determinado en un store y si nosotros queremos mapear con otro nombre es posible de esta forma, ¿sí?. Entonces, todo este código que aquí tenemos escrito es equivalente a usar mapActions de esta manera, tenemos que pasar aquí el método useCartStore seguido de un objeto, dentro de este objeto como se puede ver vamos a poner un método y vamos a asociarlo con una acción. Por ejemplo vamos a poner un método decrementQuantity y lo vamos a asociar con la acción decrement, siguiendo la misma idea vamos a tener incrementQuantity y lo vamos a asociar con un action llamado increment, vamos a tener un método deleteProduct y lo vamos a asociar con un action deleteProduct ¿sí?. Este mapActions básicamente se encarga de definir por nosotros tres métodos; decrementQuantity, incrementQuantity, deleteProduct y este mapActions nos va a devolver a los métodos ya definidos. Los tres puntos simplemente nos sirven para hacer destructuring del resultado y permitir que cada método que este mapActions devuelve quede asociado al objeto methods. Dicho de otra forma, estas líneas de código las hemos escrito de esta forma para que tú entiendas exactamente qué es lo que está ocurriendo por detrás. Muchas veces se usa mapActions sin entender qué es lo que hace. Nosotros en cambio, primero hemos definido métodos que llaman acciones y hemos mapeado manualmente, pero ahora que ya sabemos cómo funciona podemos abreviar esto de esta manera. Podemos usar mapActions que es una función que nos provee pinia, le indicamos con qué store vamos a mapear y luego le indicamos qué método queremos mapear, a que acción. Método acción, método acción. Entonces vamos a guardar y vamos a hacer una prueba para ver si es cierto. Aquí tenemos esto, podemos aumentar podemos disminuir y podemos eliminar. Es importante también mencionar que aquí nosotros estamos pasando un objeto y estamos mapeando método con acción ¿Por qué? Porque hemos querido usar un método con un nombre distinto a la acción. Sin embargo, si tu quieres usar las acciones con el mismo nombre con que se han definido en el store también lo puedes hacer, y de hecho esto sería más breve, por qué puedes pasar un arreglo simplemente. Puedes usar mapActions, indicar el store y pasar un arreglo de cadenas con el nombre de las acciones. Esto automáticamente creará un método increment mapeado con una acción increment y un método setCount asociado con una acción setCount. De esta forma, podemos mapear directamente acciones con métodos manteniendo el mismo nombre, como este ejemplo lo indica. Ambas opciones son correctas entonces va a depender de tu proyecto. Si quieres ir más rápido puedes hacer esto. Sin embargo, van a haber ocasiones en las que tú desde un mismo componente vas a acceder a dos stores y ambos store podrían tener acciones con nombres en común, entonces en ese caso es importante usar esta anotación de aquí, para que tú puedas referirte a dichas acciones con un nombre distinto.

Crea una cuenta y continúa aprendiendo 🚀

mapActions