¿Qué es lo último que hicimos en nuestra aplicación?
Es una acción que era del tipo ToggleImportant,
de forma que podíamos cambiarle la importancia a una nota.
Pero esto todavía no lo hemos implementado en nuestra aplicación, ni siquiera.
Hicimos TDD para implementar este reducer para gestionar este nuevo estado,
para decirle, vale, ten, aquí tienes una nueva nota y le tienes que cambiar la importancia.
Vamos a hacer un formulario para crear notas.
Las estábamos haciendo en el punto de entrada de nuestra aplicación aquí
y las estábamos añadiendo, ves, manualmente.
Hacíamos un StoreDispatch y estábamos añadiendo esto.
Voy a eliminarlo, voy a comentarlo por ahora.
Y al guardar los cambios, volver aquí, pues, ves, ahora no hay notas.
Así que vamos a ir aquí abajo, vamos a añadir un div.
Esta lista desordenada, ¿vale? La vamos a poner por aquí.
Y aquí vamos a poner nuestro formulario.
Un formulario que va a tener un onSubmit, un método que vamos a ejecutar,
le vamos a poner un input, le vamos a poner aquí que esto es la nota
y le vamos a poner un botón que sea para añadir la nota.
El botón, cuando es el último botón de un formulario, por defecto es de typeSubmit.
Y aquí tendríamos nuestro método para crear la nota.
CreateNote o AddNote, ¿no? Mejor.
Este método lo vamos a poner por aquí.
En clases anteriores vimos cómo podíamos manejar un formulario en React,
pero aquí no lo vamos a controlar.
Que no esté controlado, lo que quiere decir, básicamente,
es que no estamos guardando en el estado
en qué estado se encuentran justamente los valores de los inputs de dentro.
Taja de no hacerlo controlado es un tema de rendimiento.
La desventaja es que pierdes un poquito del control
y estás fiándote más de las cosas que hace el don por ti.
Y lo que vamos a hacer es recuperar lo que hayamos puesto aquí en la nota.
Vamos a ver cómo lo recuperamos.
Aquí tendríamos E.
Esta E es un event, que no lo he comentado
porque ya lo hemos visto más de una vez.
Lo que podemos hacer también es recuperar el target.
Digamos, el elemento que ha disparado este evento.
Así que el target, ¿de dónde lo podemos sacar?
Pues del propio event.
Y aquí ya tendríamos el target.
Bueno, pues todo event.
Y aquí se llama el target, ¿vale?
Pues podemos acceder al elemento node por el nombre.
O sea que aquí tendríamos, si tenemos otro input con otro nombre,
pues podríamos poner target.node por el nombre
y extraer el valor.
Es el que vamos a necesitar a la hora de crear nuestra nueva nota.
Vamos a ponerle content, ¿no?
Directamente, que es el contenido de la nota.
Y así será más fácil después de despachar la acción.
Otra cosa que podemos hacer,
esto sería una manipulación directa del DOM.
Como no estamos controlando con el state,
aquí, este input, lo que podemos hacer es lo que hacíamos en la clase,
una de las clases que hacíamos, ¿no?
Que una vez que guardábamos los campos del formulario,
reseteábamos.
En lugar de resetear el estado,
ahora lo que vamos a hacer es machacar en el DOM directamente ese texto.
Lo vamos a dejar con un string vacío y ya está.
Y ahora lo que podemos hacer es de la store,
que la tenemos aquí, ¿vale?
La store es un dispatch.
¿Y el dispatch para qué servía?
Pues justamente enviar acciones.
Para decir, vale, store, que sepas que ha ocurrido esto.
¿Y qué es lo que ha ocurrido?
Pues lo que ha ocurrido es que tenemos una nueva acción.
Notes created, ¿vale?
Es como que se ha creado una nueva nota.
Y le tenemos que decir, pues, la información.
Nosotros le estamos pasando con el payload toda la información.
En el payload es donde tendríamos el objeto
que describe toda la información.
Primero tendríamos el content.
Tendríamos que decirle si es importante o no.
Justamente esto es lo que vamos a utilizar
para cambiarle si es importante o no una nota
con lo que hicimos del reducer.
También tendríamos que crearle una idea.
A ver, vamos a generar rápidamente la idea.
Como esto no es muy importante,
lo que voy a hacer es crear aquí un generate ID,
que sea un método que te genere un random, ¿vale?
Vamos a hacer un math floor de un math random
y este math random lo vamos a multiplicar
por un número muy grande y más uno.
Esto lo que nos va a dar es un número entre el uno
y el nueve, no, no, no, no, no, no, no, no.
Esto no es importante.
Esto seguramente lo haría el backend y ya está.
Por ahora, esto debería funcionar.
Tengo aquí el formulario, pues, probando.
Aquí tendríamos nuestra nota.
What, midu, midu, ¿vale?
Y estas serían mis notas que tenemos justamente en la store.
Así que crear notas, ya lo tenemos bien.
Otra cosa que podemos hacer, hombre,
cuando aquí ves que tenemos un lead,
que tiene una key y tenemos si es importante o no importante.
Hombre, ya que creamos el reducer
para cambiarle la importancia,
lo cierto es que podríamos darle un uso.
Creamos un método.
Se llama toggle important.
Al toggle important le vamos a pasar directamente
la ID de la nota que queremos cambiar su importancia.
O sea, que hacemos un store dispatch
y ¿qué le tenemos que pasar aquí?
El tipo, que el tipo lo tenemos justamente por aquí.
Es este.
Este es el tipo de la acción.
Pues el tipo es este.
Y el payload es, en este caso, un objeto
que hay que decirle la ID del que quieres cambiar la importancia.
Pues esta ID le va a llegar por parámetro.
Ahora, ¿dónde tenemos que ejecutar esto?
Bueno, así que vamos a hacer que cada vez que se le haga clic
a todo el elemento lead, ¿vale?
De una nota, que vaya cambiando la importancia de esa nota.
Así que cuando se haga clic, aquí vamos a ejecutar un método
que sea el toggle important con el node.id.
Ahora si le doy, podemos ver que va cambiando de important
a node.important.
Y esto es porque está haciendo el toggle,
o sea, que está funcionando correctamente todo.
Esto lo voy a eliminar, que no nos ayuda ya en nada, ¿vale?
Hay un tema que aquí ya, pues digamos que chirría.
Y es el tema que cuando creamos una acción, ¿no?
Cuando estamos pasando una acción,
estamos haciendo un dispatch, le decimos,
oye, store, ha pasado esto, ¿no?
Y tenemos que crear todo este objeto entero y tal.
A ver, no es que esté mal, pero puedes ver que constantemente
estamos repitiendo las acciones, este contrato de la acción.
Para esto existe justamente una cosa en Redux,
que es parte del pattern o del patrón que se suele utilizar,
que son los action creators, o creadores de acciones.
¿Qué significa o qué es un creador de acción?
Un creador de acción, un action creator,
lo que hace es abstraer todo esto,
de forma que vamos a tener en un método
que le pasamos los parámetros mínimos que necesita
para crear esta acción de aquí.
Vamos a hacer una que sea un create node.
¿Y qué necesita este create node?
¿Vale? Que es justamente esto.
Esto es una action, es un objeto con el type y el payload.
Lo que vamos a hacer con este create node,
si te fijas, lo único que necesita sería el generate ID y el content.
El generate ID lo tenemos justamente fuera.
Al crear la nota necesitamos el content.
Pues como parámetro le vamos a pasar el content.
Pues lo que va a devolver es la acción.
Para eso se llama un action creator,
porque va a crear una acción.
La acción que va a crear el create node es justamente todo esto.
Y entonces, ¿por qué es importante esto?
Porque si tú tienes la creación del objeto aquí,
aparte de que no se puede reusar fácilmente,
en este caso solo tenemos un componente o tenemos todo a saco,
pero poco a poco lo vamos a ir separando.
Aparte de esto, es que el tener un contrato,
un string repetido en diferentes sitios es bastante peligroso.
No te fíes de los strings.
Así que lo que vamos a hacer justamente esta función
es dejar de tener que crear este objeto constantemente
y saber todos los detalles del payload y tal.
Lo que hacemos aquí es el create node,
le pasamos el content y nos devuelve el objeto que necesitamos,
o sea, la acción.
Este create node lo vamos a poner aquí
y cuando hagamos el dispatch,
lo que hacemos es un create node y le pasamos el content.
¿Qué estamos diciéndole a esto?
Es, haz un dispatch de la acción que estás creando aquí,
con este action creator.
Nos devuelve el objeto que es la acción,
que la tenemos aquí y ya estaría.
Lo mismo exactamente podríamos hacer con el toggle importance of
y le ponemos aquí la id.
Esto es una forma de leerlo, ¿no?
Cambia la importancia de la id.
Lo mismo, hacemos esto y esto,
en lugar de hacerlo aquí,
de hacer todo este objeto aquí manualmente,
lo que podemos hacer es ponerlo aquí.
Está bien que conozcas un poco este pattern de Redux,
pero también es algo que puedes utilizar más allá de Redux.
En lugar de hacer el dispatch de este objeto,
lo que hacemos es toggle importance of the id.
Primero voy a ver que todo funciona correctamente.
Súper importante siempre asegurarnos que las cosas,
cuando hacemos unos pocos,
aunque sean pocos cambios,
pues vamos, probamos,
oye, funciona bien, sí.
Vale, perfecto.
Y vamos tirando.
Antes de seguir ahí haciendo cambios
y luego de repente,
oye, ¿por qué no funciona esto?
Bueno, ahora que ya sabemos que funciona esto bien,
una cosa que justamente podemos hacer
para reutilizar estos métodos
es sacarlos de aquí.
Estos dos métodos que tenemos por aquí,
incluso Generate ID,
porque no es importante para este componente,
los voy a cortar.
Y lo que voy a hacer es llevármelo al NodeReducer este.
Y los voy a poner aquí.
Y ahora, de este, este Create Node,
lo que puedo hacer es exportarlo
y esto también lo puedo exportar.
Así que, de esta forma,
cada vez que quiera utilizar estas acciones,
lo que puedo hacer es llamar directamente
al Create Node y el Toggle Importance
e importarlos.
Igual que hago aquí,
que estoy importando el Reducer,
pues ahora puedo hacer el Create Node
y el Toggle Importance.
Pues ya empieza mi componente
a dejar de estar tan hinchado, ¿no?
Y tener, además, tantos detalles
de cómo tiene que gestionar el estado,
que no tiene mucho sentido.
Pero todavía me chirrían unas cuantas cosas.
A mí lo que me gustaría, en realidad,
es empezar esta aplicación
que ahora mismo es un componente
de arriba a abajo
que tiene todo.
Lo tiene todo.
Mira, es que encima estamos
en el punto de entrada de la aplicación.
O sea, ni siquiera, como puedes ver,
la Store cuando se está suscribiendo
y entonces está renderizando toda la app.
Esto es porque hemos aprendido Redux
y cómo utilizar Redux así, en Vanilla,
sin ningún tipo de conexión con React.
Y funcionar funciona.
Estamos viendo que Redux
es totalmente agnóstico
a la librería,
a la biblioteca de UI que utilicemos.
Esto mismo lo podríamos utilizar
en un montón de librerías,
incluso con JavaScript puro y duro.
Y eso es lo importante, ¿no?
Entender que Redux
es algo que puede funcionar
de forma totalmente separada en React.
Pero, obviamente,
vamos a intentar llevar esto
a un nivel superior
porque esto no es la forma correcta
de que funcione renderizar
otra vez toda la aplicación.
Lo que vamos a querer
es que esté mejor integrado Redux con React.
Para ello, ¿cómo lo vamos a hacer?
Primero, antes de nada...