¿Cómo podemos utilizar las DevTools?
Porque lo vimos en la clase anterior, que hay unas ReduxDevTools,
pero puedes ver que si lo intento utilizar aquí en React, no funcionan.
Me dice NoStoreFound.
Bueno, aquí podríamos ir a instrucciones, ver cómo se tiene que hacer,
pero no hace falta que vayamos porque ya me lo sé.
Vamos a hacer un npm install.
Lo guardamos como dependencia de desarrollo.
Por eso hacemos un SaveDev.
Hacemos ReduxDevToolsExtension.
Aunque estoy pensando si tiene sentido hacerlo como dependencia de desarrollo.
Y te explico por qué.
Hay veces que las dependencias de desarrollo, cuando hablamos de desarrollo,
lo que quieren decir no solo es que sean para desarrollar,
sino que son dependencias que podrías no instalar y tu aplicación debería funcionar.
Claro, en este caso al dejarla como DevDependency,
ahora verás dónde la voy a utilizar, cómo la voy a utilizar,
y puede ser problemático si no se instala.
Entonces creo que sería lo ideal, sería que estuviese en las dependencias.
Aunque sea de desarrollo, que esté en las dependencias.
Así que la voy a mover.
¿Cómo podemos solucionar el problema de que no detecta la Store?
Pues vamos a ir al Index, que es el punto de entrada de nuestra aplicación.
Tendríamos aquí el Reducer, CombineReducer, Store.
Tendríamos el Reducer que habíamos combinado antes.
Pues lo que tenemos que hacer aquí es utilizar un método que era ComposeWithDevTools.
¿Veis aquí que pone ComposeWithDevTools?
Pues vamos a utilizar este ComposeWithDevTools y lo ejecutamos, porque es un método.
Esto lo que va a hacer, aparte de que luego nos va a permitir poder ampliar la configuración,
porque si no podríamos utilizar Middleware, que lo veremos más adelante.
Esto lo que hace es activar la extensión de las DevTools y pasarle la Store para que la pueda ver y tal.
Así que con esto, si refrescamos esto, ahora ves que sí que tengo aquí el inspector
y todo parece que está funcionando correctamente.
Si nos ponemos aquí a hacer cositas, pues vamos viendo aquí los Action Types y las cosas que ha hecho.
Voy a ir cambiando aquí, por ejemplo, los filtros y además podemos viajar hacia atrás.
Podemos ir hacia atrás.
Bueno, que no se ve mucho el cambio, pero básicamente puedes ir viajando en el tiempo para ver el estado que tenías y tal.
Y es bastante interesante porque así puedes divulgar a otro nivel.
No solo que puedes ver aquí todo el historial de cosas que se han ido haciendo,
cómo ha ido cambiando el estado, las diferencias del estado.
¿Ves? Aquí podemos ver el estado entero en cada uno de los pasos, cómo ha ido cambiando.
¿Ves? Aquí el True, no sé qué. Cada vez que voy haciendo eso, pues lo puedes ver,
las diferencias que ha tenido el estado en cada uno y puedes enviarle tú acciones
de forma que de esta forma puedes decir, ah, pues ahora quiero añadir una nota desde esta consola.
Y ya está. Pues ya lo tendríamos.
A ver, ¿y esto qué es? Esto es, ah, está aquí, está aquí, es verdad, está aquí, es verdad.
Ostras, yo pensaba que esto ya era otra cosa.
Vale, es aquí donde se tiene que poner la acción, ¿eh? Es aquí.
No se pone aquí. Esto es como para ver la acción en RAW, ¿vale?
Es aquí donde se pone la acción.
Entonces se le da aquí al dispatch. Muy bien.
El dispatch que no se ve, pero está debajo mío.
Aquí estaría el botón dispatch.
Que tampoco hay. A ver si se ve ahora.
Aquí. Aquí estaría el dispatch y aquí es donde puedes poner la acción, claro.
Podríamos poner esto, pasarle esto y hacer...
Si es que yo recordaba que era abajo, pero no sé por qué pensaba que siempre se veía.
Pero sí. Muchas gracias, Urefuni, por encontrarla. Muchas gracias.
Pues ahora ya sí que tenemos esto. Venga, vamos a hacer que tengamos como...
Gracias.
Gracias.