Términos clave en Redux
En esta lección, repasaremos brevemente los conceptos y términos clave cuyo dominio es necesario para el estudio posterior de Redux.
Comenzaremos con la acción (action).
Es un evento que
describe lo que ocurrió en nuestra
aplicación. Técnicamente es un
objeto JavaScript normal,
que contiene el campo type, en el que escribimos
el nombre de la acción.
El segundo campo importante del objeto de acción
es el campo payload.
Contendrá la carga útil
de la acción. Por carga útil se entienden
algunos datos que se pasan
como parámetros a la acción.
También puede haber otros campos en este objeto con información adicional.
Como ejemplo, creemos una acción
y llamémosla addOrderAction. Que
se encargue de añadir un pedido.
Entonces, en la propiedad type indicaremos que
el pedido fue añadido (orderAdded) a los pedidos
(orders). Y en payload especificaremos en detalle,
qué pedido es, por ejemplo - pintar
una pared:
const addOrderAction = {
type: 'orders/orderAdded',
payload: 'Paint a wall'
}
Para no tener que escribir el objeto
de acción manualmente cada vez, podemos usar
el llamado action creator - una función
que crea y devuelve
el objeto de acción. Llamémosla
addOrder. Como parámetro le
pasaremos el texto que necesitemos para
la propiedad payload:
const addOrder = text => {
return {
type: 'orders/orderAdded',
payload: text
}
}
El siguiente concepto importante en la cadena es el reducer (reductor) - una función que toma el estado actual y el objeto de acción. Esta función decide cómo actualizar el estado y devuelve el estado ya actualizado, si es necesario.
El siguiente concepto es el almacén (store) - es un objeto que almacena el estado global actual de la aplicación Redux. Este objeto tiene un método getState, con el que se puede obtener el valor actual del estado.
El almacén también tiene el método dispatch. Llamarlo y pasarle un objeto de acción es la única forma de cambiar el estado. Como resultado, el almacén ejecutará la función reductora y guardará el nuevo valor del estado.
Y el último concepto que veremos en esta lección son los selectores. Los selectores son funciones especiales que saben cómo extraer información del estado ubicado en el almacén. Estas funciones resultan especialmente útiles cuando la aplicación crece y ayudan a evitar la repetición de código.
Obtendremos más información sobre todos estos conceptos y sobre su aplicación práctica en las siguientes secciones de este tutorial.