A veces, cuando tenemos una aplicación de Real Redux, quieres inicializar la aplicación con unos datos que vienen de un servidor.
Pues vamos a ver en esta clase cómo lo puedes conseguir muy fácilmente, cómo puedes inicializar ese estado inicial.
Lo que vamos a hacer es crear una base de datos, bueno, un backend de estos con un JSON Server para ir más rápido.
O sea que vamos a tener aquí un archivo de b.json y esto lo vamos a poder sacar, por ejemplo, de nuestro estado inicial.
No sé si teníamos por aquí NodeReducers, teníamos un estado inicial, este InitialState.
Pues este InitialState es que vamos a tener por aquí.
Vamos a tener un objeto que sea notas y aquí le pegamos esto.
Claro, el problema es que esto no es JSON, podría haberlo transformado antes.
Que esto tiene que ser JSON, ya, demasiado tarde.
Vale, ya tenemos las notas en un db.json.
¿Pero qué es esto del db.json? Te estarás preguntando.
Bueno, lo que vamos a hacer es crear como un backend de mentiras rápidamente para no tener que levantar otro servicio o hacer tal.
Lo vamos a hacer con JSON Server, que JSON Server justamente lo que hace es leer ese archivo d.json para funcionar.
Así que vamos a añadir aquí un script que sea, por ejemplo, server.
Y esto lo que hace es un JSON Server.
Hay que decirle el puerto, no sé si era junto, creo que sí.
Vamos a decir que mire los cambios, hacemos un watch y le decimos el archivo donde tiene la base de datos.
Con este script ahora podríamos ejecutarlo aquí, por ejemplo, runServer.
Vamos a ver, esto debería habernos levantado, ¿ves?
Resources, nos han encontrado los resources y vamos aquí a notas, ya nos devolvería las notas que tenemos en el db.json.
Va súper bien esta herramienta para hacer cosas como pequeñas pruebas o tener una base de datos y no preocuparte del backend, cosas así.
¿Cómo funcionamos nosotros?
Pues lo que creamos siempre son servicios.
Así que vamos a crear aquí una carpeta services y en la carpeta services vamos a tener notas.
Aquí es una cosa parecida a lo que hicimos en una de las clases anteriores.
Y en este caso lo voy a hacer con Axios, porque sé que a muchos de ustedes se ocupa Axios.
La base URL es justamente la que ha accedido, que es localhost 3001 barra notes para recuperar las notas.
Y vamos a tener un método para recuperar todas las notas.
Porque hasta ahora teníamos las notas ahí puestas a mano y eso no tiene sentido.
Lo que vamos a querer es recuperarlas de un backend.
Vale, pues aquí teníamos la respuesta.
Hacemos axios.get del base URL.
Ahora tengo que instalar Axios, que si no esto no funciona.
Axios al final es una alternativa a fetch, lo que pasa es que es bastante más...
Uy, esto debería ser asíncrono, perdón.
Es bastante más potente porque al final lo que hace es envolverla y simplificarla.
Así que con un punto get, lo que voy a hacer es una petición get al base URL.
Y no hace falta ni siquiera que lo transformemos esto a JSON ni nada, porque ya lo hace automáticamente.
Y este response debería tener el data.
El data deberían ser nuestras notas directamente.
Vamos a hacer un export de esto.
Vamos a hacerlo aquí directamente.
Export const get all.
Ahora que tenemos todas las notas, o podríamos recuperar todas las notas, antes de que se me olvide, voy a instalar Axios.
Vale, debería ser un momentito de nada.
Perfecto.
Vamos al node reducer.
Este initial state nos lo cargamos, ya no lo necesitamos.
Y aquí en el state, que teníamos este initial state, aquí lo que vamos a hacer es que sea un array.
Vale, vamos a empezar con un array en lugar de ya añadir la información.
Porque esta información la vamos a traer directamente del backend.
Ahora que tenemos esto, ya tenemos el node service y todo esto.
¿Qué podríamos hacer?
A ver, antes de nada, en el punto de entrada de nuestra aplicación, veis este index.js que empieza a ser bastante grande y hace como dos cosas.
Vamos a separar en un archivo store.js todo lo que tenga que ver con la store, inicialización y todo esto.
Por ejemplo, este node reducer nos lo llevamos aquí a la store.
¿Qué más? ¿Qué más? Este compose with devtools nos lo vamos a llevar a la store también.
¿Qué más? El reducer, todo esto también, también por aquí.
Y ahora lo que podríamos hacer es un export de la store, ¿no? Directamente.
Este combine reducer no me lo he traído. Esto también nos lo traemos.
Importamos, exportamos la store y en el punto de entrada de nuestra aplicación, pues la importamos.
Store from punto barra nombrado, porque aquí lo he puesto con un export const nombrado también.
Esto debería funcionar igual, pero bueno, esto nos va a ayudar un poco a hacer que el código sea un poquito más legible,
que si no es un poquito raro porque tengo que añadir aquí otra cosita.
Ahora que tenemos la store, que ya la tenemos creada, voy a hacer aquí esto que tenga un salto y ahora me llevo esto un poco para arriba.
Ahora que tenemos la store aquí. Una forma en la que podríamos hacer, inicializar el estado de la store con las notas sería aquí a saco,
pues buscar el services este, get all, vale, no me lo detecta, import get all, el services este que he creado, services barra notes.
Vale, pues podría hacer este get all aquí a saco, resolver la que sería la promesa, ¿no?
Y tener aquí las notes y podríamos hacer para cada una de las notas que estamos recibiendo del backend,
pues tengo la nota y para cada nota que hago, un store dispatch y aquí le digo del tipo new note,
bueno, new note no, esto sería barra notes, vamos a ver en el reducer como lo hemos dicho,
notes created, ¿no? Cuando creábamos una nota lo hacíamos así, notes created.
Y le podríamos pasar el payload, que el payload debería ser nuestra nota, ¿no?
Vamos a ver si esto funciona, vale, veis que tenemos bienvenidos a mi clase, gracias y tal.
Esto lo tenemos del backend, o sea que esto ya viene del backend, ¿eh?
Gracias, backend, por ejemplo. Y ahora sí que debería, ¿ves? Ahora sí que funciona correctamente.
Vale, perfecto. Pues aquí en las notas, ¿ves? Está haciendo la llamada a la API, le está devolviendo esto.
Y a ver, esta no es la mejor forma de inicializar justamente nuestro proyecto, ¿vale?
Porque lo estamos haciendo muy manual. Estamos haciendo aquí, estamos utilizando justamente una forma que no es la correcta.
Estamos haciendo un dispatch con notes created que no es la correcta.
Una cosa que se podría hacer, por ejemplo, es tener aquí, por ejemplo, un action type que fuese, al menos, para inicializar.
O sea, un action type más pensada para inicializar lo que sería el estado de las notas.
En lugar de utilizar otra acción que en realidad es para crear.
Da información errónea.
Imagina que este action type se escuchase en otro sitio o hiciese otras cosas.
No es lo correcto.
Así que lo mejor es que tuvieses un action type justamente para inicializar el estado de tu nota.
Así que vamos a hacer esto y de la misma forma que tenemos aquí los action creators, pues podríamos tener el mismo para init notes, no sé.
O init notes, vamos a ponerle.
Que le pasemos las notas y aquí lo mismo, ¿no?
Creamos el action type y lo vamos a hacer asegurándonos que hacemos este, notes init y que el payload tenga las notas.
Así que ahora, en lugar de utilizar el created, para cada uno de ellos, lo que podríamos hacer, todo el punto dispatch.
Y en lugar de crear la acción, aquí manualmente, como habíamos dicho aquí, pues vamos a utilizar esta de aquí, la init notes.
Así que ponemos init notes, la importamos, ¿no?
La he importado aquí arriba, ¿ves?
init notes.
Y ahora, aunque ya te digo que esto lo vamos a volver a mejorar, porque tampoco es la forma correcta.
Y aquí le pasaríamos todas las notas.
Vamos mejorando, ¿no?
Al menos haríamos esto.
Pero esto está fuera, digamos, de...
Vamos a ver si esto funciona bien.
Esto está fuera del ciclo de vida de React.
O sea que esto no sería la forma correcta de inicializar realmente la store,
porque digamos que está como desactivada, o sea, está como descontrolada fuera de nuestra aplicación de React.
El sitio correcto donde deberíamos hacer esto no es aquí.
No sería la store inicializar y eso.
No lo deberíamos hacer aquí.
Esto en realidad lo deberíamos hacer, bueno, lo podríamos hacer en un montón de sitios,
pero yo creo que puede ser que el sitio correcto, por ejemplo, pudiera ser la propia app.
Y ni siquiera hace falta que la propia app cambie el estado como tal,
sino lo que tienes que hacer en la app sería tener un useEffect.
Y este useEffect lo que haría, tiene aquí una dependencia,
y le deberíamos decir lo que tiene que hacer, ¿no?
Cuando la aplicación se monta por primera vez, en este caso que se monte,
pues entonces podríamos recibir, llamar al servicio de getAll, que lo vamos a importar,
de los servicios de las nodes, ¿vale?
Services, nodes, recuperarlas todas.
En los componentes no utilizamos el store, sino que tendríamos el dispatch del useDispatch.
Y este initNodes, esto en realidad, pues también es initNodes,
lo tendríamos del reducer de notas.
Vale, aquí verás que esto es interesante, una cosa que nos está diciendo ahí,
que ahora os la comentaré, ¿vale?
Así que quitamos esto de aquí, vamos a importar, el useEffect funciona correctamente,
pero fíjate que aquí el linter se está quejando de algo, ¿vale?
Dice, el hookUseffect tiene una dependencia que le falta, que es dispatch.
O la incluyes, o otra cosa que puedes hacer, aquí es desactivar el linter y tal, ¿no?
¿Por qué?
Pero ¿por qué necesita y por qué cree que es una dependencia?
El tema es que cuando está aquí dentro, lo que cree React es que este useDispatch,
el valor de este dispatch puede cambiar.
Y si cambia, significa que este efecto debería volver a ejecutarse,
porque el dispatch es diferente.
En este caso, no ocurriría, el dispatch no debería cambiar,
debería ser siempre el mismo.
Y esto seguramente podría solucionarse justamente haciendo un custom hook,
que lo veremos más adelante cómo lo podemos hacer.
Pero en este caso, lo podemos dejar que tiene bastante sentido que esté,
así que lo vamos a dejar de esta forma, ¿vale?
Igualmente, es eso, que yo soy muy fan de no tener useFX y tal,
sino que todo sea en custom hooks.
Así que en clases posteriores, no te preocupes,
que veremos cómo hacer un custom hook y que esto quede bastante mejor.
Lo importante es que hagamos en este punto el traerse los datos
y para ello hagamos este dispatch de esta acción.
Vale, aparte del service que habíamos hecho,
habíamos hecho un servicio justamente para recuperar todas las notas,
también podríamos hacer uno para crear una nota.