En esta clase vamos a aprender cómo podemos conectar Redux en una aplicación de React.
Esta clase forma parte de una lista de reproducción donde hemos hecho un full stat bootcamp JavaScript.
Te dejo aquí arriba la lista de reproducción por si quieres repasar alguna clase o quieres ver algún contenido que te has pedido perder.
Así que nada, te dejo con la clase, espero que la disfrutes. Vamos a ello. React con Redux.
Vamos a instalar React Redux. ¿Veis este componente app que teníamos por aquí?
Pues este componente app vamos a cortarlo y lo que vamos a hacer es llevárnoslo a .js.
Que ahora teníamos el que viene por defecto cuando creas un proyecto. Vamos a poner el nuestro.
Pero ya podemos ver que aquí le falta un montón de cosas. El store, el create node.
Esto de create node y eso no es difícil porque podríamos importarlo. El node reducer no lo necesitamos.
Ahora lo único que nos faltaría sería la store. Una cosa que podríamos hacer con lo de la store sería pasársela así por props.
Y en lugar de esto ya no lo necesitamos de aquí. Esta app la tenemos que importar, que la acabamos de sacar app.
Hay que hacer un export default de esto. Importante. Export default app.
Ya lo tenemos aquí. Vale, aquí tiene la store que tenemos que sacarla de las props ahora mismo.
Esto debería funcionar. Lo único que hemos hecho ahora mismo es separar el punto de entrada de nuestra aplicación con el componente de React, el de aplicación.
Y la store se la estamos pasando por props. ¿Cuál es el problema? Que si yo ahora lo que quiero es, por ejemplo, este formulario, sacarlo a un nuevo componente,
deberíamos estar constantemente moviendo la store para arriba y para abajo para ver cómo tenemos que hacer que la store vaya viajando.
Esta no es la forma. Para eso justamente hemos instalado React Redux. ¿Cómo se utiliza React Redux?
Lo primero, esto se queda así, el Create Store, esto es un tema de Redux, pero vamos a utilizar un nuevo componente que se llama Provider y esto sí lo vamos a sacar de React Redux.
¿Y para qué sirve este Provider? Pues lo que vamos a hacer, vemos este RenderUp y este Subscribe y todo esto, todo esto lo vamos a eliminar.
Y nos vamos a quedar aquí con el React DOM.Render y lo vamos a dejar aquí.
Porque este Provider que estamos utilizando, este Provider es el que se va a encargar, por un lado, de tener la store y hacer que esta store esté disponible en toda nuestra aplicación.
Ya veremos justamente cómo nos permite acceder a la store y a cómo hacer dispatch y leer el estado y todo esto.
Pero por ahora, este Provider lo que hace es envolver nuestra aplicación y le pasamos la store.
O sea, esta store va a estar disponible en todos los componentes que están globando, en este caso, la app.
Y por lo tanto, ya no necesitamos como tal hacer esto, que eso estamos pasando por props, esto ya no lo necesitamos.
Necesitamos hacer algunos cambios en nuestra app, porque aquí teníamos el store que decía que le llegaba por props, pero esto ya no le va a llegar por props nada.
O sea, esto ya no va a funcionar de ninguna forma.
¿Cómo podemos recuperar el state y cómo podemos hacer todavía los dispatch?
Igual que en React tenemos hooks que funcionan con useState, useEffect, que ya los hemos visto en clases anteriores, React Redux lo que nos está proporcionando son sus propios hooks, dos hooks.
Vamos a hacer un from React Redux para que veamos aquí uno que se llama useDispatch y otro useSelector.
Pero fíjate que es uno que es useStore.
Así que la forma más sencilla que podríamos utilizar esto sería hacer aquí un store y hacer un useStore y directamente esto debería funcionar.
Este hook es como que nos devuelve directamente toda la store.
Pero veremos que esta no es la forma en la que deberíamos trabajar.
¿Por qué?
Porque esto al final lo que nos está haciendo es devolver toda la store.
El useStore no hace la suscripción.
Vamos a utilizar los otros dos, que está el useDispatch y el useSelector.
Que el useSelector, en este caso, podemos seleccionar una parte del estado a la que nos queremos suscribir y además leerlo, que es justamente lo que queremos.
Así que vamos a quitar esto.
Ya vamos a dejar de utilizar directamente el store.
En este caso, el state, vamos a utilizar el useSelector.
Lo que recibes aquí es una función donde tienes el estado y tú le tienes que decir qué parte del estado te quieres suscribir o quieres leer.
En este caso, en nuestro estado, si miramos el reducer, en el estado tenemos todas las notas.
Ahora mismo el estado es un array con todas las notas.
Bueno, pues lo que vamos a hacer es directamente que nos devuelva todo el state.
Esto es ahora sí, pero poco a poco vamos a ver que lo vamos a hacer de otra forma.
Actualmente nos interesa todo el estado porque ahí es donde tenemos todas las notas, así que lo vamos a dejar así por ahora.
Pero luego veremos cómo lo vamos a hacer de otra forma.
Y luego tendríamos el dispatch, el useDispatch que hemos visto.
UseDispatch, este.
Vale, el useDispatch, esto lo que nos devuelve es directamente un dispatch.
De forma que en lugar de hacer un store.dispatch, podemos utilizar este dispatch de aquí y ya está.
Así que en todos los sitios que teníamos la store, vamos a quitarla.
Aquí tenemos el state directamente.
No teníamos ninguna referencia más al store.
Bueno, pues vamos a ver si esto ahora funciona o si nos sigue dando problemas.
Y si sigue dando problemas, pues ahora sí que funciona.
Yo creo, ya os digo, yo nunca, nunca jamás he utilizado directamente el useStore.
De hecho, quería ver si lo devolvía porque me sonaba que lo hacía.
Pero estoy bastante seguro que el useStore no hace una suscripción, ¿vale?
O sea, que sí que tienes la store, pero no hace el store.subscribe por ti de forma automática.
Para ello, lo que hay que hacer es utilizar el useSelector.
Por selector, lo que tienes que entender es que quiero seleccionar una parte del estado.
Y esa parte del estado es a la que me quiero suscribir.
Y la que quiero leer.
De forma que se guarde aquí, en state.
Al final, aquí en state, piensa que este state en realidad son las notas.
Porque por ahora, ahí es donde tenemos las notas.
Pero más adelante veremos que esto lo vamos un poco a iterar.
Que el state va a ser un poquito más complejo.
Y esto puede cambiar.
Además, es que podríamos hacer aquí en el state un montón de cosas.
Por ejemplo, podríamos tener las notas importantes.
Las important notes, ¿vale?
Hacemos un useSelector.
Y aquí del state, quita.
Que no me dejan leer.
Del state, todo el rato ahí con el hover ese enorme.
Del state podríamos hacer un stateFilter, donde el state, como es un array,
pues vamos a filtrar la nota que sea importante.
Entonces, lo que haríamos aquí, por ejemplo, sería tener todas las notas importantes.
Al final, el useSelector te permite suscribirte a diferentes partes del estado.
Así que, esto por ahora, ya sabemos que lo podemos hacer.
Pero lo vamos a dejar así, tal cual.
Ahora que ya tenemos esto, pues ya debería estar funcionando todo correctamente.
Lo hemos probado, funciona, perfecto.
Pero esto lo habíamos hecho para algo, ¿vale?
Esto lo habíamos hecho justamente para separar nuestros componentes.
¿Por qué?
Porque, hombre, ahora lo que tenemos justamente es todo en un mismo archivo ahí a saco.
Y esto no es lo que queremos.
Lo que queremos es separar.
Vamos a separar.
Vamos a components.
Y ahora que tenemos components, pues venga, vamos a poner new.
Vamos a poner aquí, newNode.js.
Vamos a separar el formulario a este componente.
Vamos a sacar este form que teníamos por aquí.
Vamos a hacer un export.
Voy a hacer un export default, pero bueno, si no quieres hacer un export default,
pues haz uno nombrado, como prefieras.
¿Vale?
Yo esto lo voy a hacer así, para hacerlo un poquito más rápido.
Ya tendríamos aquí el newNode.
Esto va a ser newNode y lo vamos a dejar así.
Este newNode lo tendríamos que importar.
NewNode, desde los componentes, newNode.
Obviamente, ese newNode todavía le falta cosita, ¿no?
Porque sí que lo hemos separado, pero ¿de dónde sale todo esto?
Vale, esto tiene que salir de algún sitio, obviamente.
Y de dónde viene justamente este addNode.
Lo tenemos que sacar de aquí.
Así que lo quitamos, lo ponemos aquí.
Y ya vemos aquí que necesitamos tanto el dispatch como el createNode.
Pues lo que hacemos es un useDispatch.
Esto lo importamos.
¿Ves?
Se ha importado automáticamente el React Redux, dispatch.
Y este createNode lo podemos importar también de los Redusers que teníamos.
Esto ya estaría.
Vamos a ver por aquí.
Nos queda el newNode.
Si guardo los cambios, vamos a ver si podemos crear una nota.
¿Vale?
Podemos crear una nota.
Sigue funcionando bien.
Pero ahora, si miramos los componentes de React, deberíamos ver, ¿ves?
Que tengo aquí un componente newNode.
Perfecto.
Vamos a seguir separando.
Ahora que ya tenemos el newNode, ya hemos visto que puedo utilizar un dispatch, pero en
este caso solo es un dispatch.
No estoy leyendo para nada las torres.
Vamos a seguir en este punto.
Y ahora lo que vamos a hacer es extraer las notas.
Así que vamos a crear un componente notes.
Vamos a hacer un export default function notes.
Y fíjate que ni al newNode ni por ahora al notes le está llegando nada por props ni nada.
Vale.
Vamos a poner esta lista desordenada aquí en el retón.
Lo hacemos así.
Venga.
Esa información que nos falta, ¿de dónde viene?
¿De dónde viene esa información?
Pues aquí lo tenemos, ¿no?
De notes.
Esto viene del selector que estamos haciendo del store.
Este useSelector lo tenemos que importar.
Pues lo importamos de React Redux.
¿Qué más nos falta?
Ahora, el toggleImportant, esto lo tenemos que importar del Reducer.
¿Qué más nos falta?
Pues ahora mismo no veo que nos falte nada más, ¿no?
El toggleImportant.
Ay, de hecho, hay aquí este toggleImportant.
Igual aquí he hecho antes.
No, es que este toggleImportant no es este toggleImportant.
Vale, vale.
Ojo.
Ojo, este toggleImportant que yo he importado aquí en Reducers.
Esto no es así.
Este toggleImportant es este método que tenemos aquí, ¿vale?
Este toggleImportant, este.
No el que nos viene del Reducer.
Del Reducer ni siquiera existe ese.
Lo que existe es el toggleImportant of, que es el actionCreator, ¿vale?
Así que este toggleImportant, este sí que es el método.
Y aquí también necesitamos el dispatch.
Vale, dispatch, useDispatch.
Y ya tendríamos aquí nuestro componente.
Vemos que está todo bien.
No hay nada en rojo.
Vamos a ver aquí.
Ahora, fíjate aquí lo que ha pasado.
Lo que ha pasado aquí.
Fíjate que nuestra aplicación ha quedado en un momentito además.
O sea, es como que hemos pestañeado y de repente ha pasado todo esto.
Pues se ha quedado en esto nuestra aplicación.
Vamos a ver todavía que funcione.
No vaya a ser que nos llevemos una sorpresa, ¿eh?
O sea, que nos llevamos una sorpresa.
Vale.
Vale.
Pero todo funciona correctamente.
Aquí vemos la app con el new node y el nodes.
Podríamos ir un poquito más allá.
Y de hecho, así te puedo explicar un poco un concepto que se llama,
es como un patrón, ¿vale?
Que es el de contenedor contenido, que se solía utilizar mucho.
Aunque en este caso va a ser un 50-50.
Pero, por ejemplo, ¿cómo se puede hacer un componente contenedor contenido?
Cuando hablábamos de esto hace años y que todavía sigue vigente y puede tener sentido,
aunque veremos en clases posteriores,
que a mí hay otra cosa que me gusta más incluso que este pattern ahora que tenemos hooks.
Pero lo que significa esto es que tú puedes tener componentes que lo único,
cuando hablamos de contenido, lo único que hace es pintarse.
Pintar el HTML, pintar lo que sea.
Por ejemplo, un componente contenido podría ser la nota.
¿Veis aquí este node que tenemos todo esto?
Todo esto que tenemos aquí.
Pues esto lo podríamos hacer aquí, directamente.
Y no debería tener ningún tipo de lógica sobre el estado, sobre hacer una llamada, ni nada.
Para esto le podríamos pasar la nota directamente.
Y fíjate que le faltaría el toggle important.
Pues esto se lo podríamos pasar también por aquí.
Le podríamos pasar el toggle important y esta nota ya tendría solo contenido.
En el sentido que lo único que está haciendo es HTML.
Este HTML lo que hace es pintar y también se le puede llamar como componente tonto.
Porque en realidad él no sabe nada de lo que tiene que hacer, sino que simplemente le dicen lo que tiene que hacer.
Todo le llega como por fuera.
Y esto lo podríamos utilizar aquí.
Ahora que estamos mapeando esto, además simplificaríamos bastante cómo se lee esto.
Sería esto, node, esto sería node.
Y toggle important, sería con el toggle important, toggle important y ya está.
Y a ver, esto por aquí, esto por aquí.
Vamos a darle un salto aquí para que se lea un poquito mejor.
Pues este node al final sería como el de contenido y aquí tendríamos el contenedor.
¿Por qué el contenedor?
Porque es el que tendría más la lógica de cómo hacer esto.
Lo que pasa es que este contenedor es un poco 50-50.
¿Por qué?
Porque si puedes ver este contenedor, en realidad también tienes HTML.
Tienes aquí una lista desordenada y esto no debería obtenerlo.
Si quisiéramos ser totalmente estrictos, lo que deberíamos hacer es que este nodes,
el nodes container, solo tuviese esta lógica.
Si queréis lo podemos hacer para que lo veamos.
Voy a probar primero que todo funciona correctamente, que no hemos roto nada con el node.
Vale, perfecto.
Lo que podríamos hacer es, por un lado, tener el export default del function, sea nodes container.
Y el nodes container debería tener esto, esta parte de aquí.
Esta parte de aquí lo que debería hacer es un nodes, devolver nodes, que le pasaríamos el nodes
y le podríamos pasar el token important.
O sea, que sería, tendríamos aquí nodes y el token important, sería token important.
Pero ya os digo que yo muchas veces, esto es cuando quieres ser muy, muy, muy, muy, muy purista.
Esto es cuando dices, no, es que no puede mezclar y tal.
Porque yo creo que hay mejores patrones.
En el sentido de que ahora puedes hacer custom hooks en las que puedes abstraer totalmente la lógica
en lugar de hacer este tipo de patrón que estás como forzando a crear nuevos componentes.
Lo que puedes hacer es extraer esos hooks.
Más adelante, en una clase, veremos cómo hacer custom hooks y veremos cómo eso nos puede ayudar
a mejorar todavía esto de separar mejor la lógica.
Ahora que teniéramos esto, para que nos hagamos una idea, aquí te llegarían las nodes y el token important.
Y esto mismo, pues ya lo que podríamos tener serían, aquí tenemos las nodes.
Vale.
Nodes.
Le pasamos las nodes.
Vale.
Pues esto sería así, básicamente.
De esta forma, este sería el contenedor, que es el que tiene como toda la información
de cómo se habla con el estado, la lógica y todo esto.
Luego tendríamos el contenido, que sería este node.
Luego tendríamos otro contenido, que sería la node.
Luego tendríamos el texto.
Bueno.
Luego tendríamos otra una celebración de aterriz Coming Up