Cuando usamos Redux nos encontramos con un pequeño problema y es que cuando despachamos una acción para que una función reductora modifique el estado, no sabemos si realmente lo hizo, y si lo hizo, no sabemos si lo hizo como deseamos o si afectó la parte del estado que precisamente queríamos afectar o quedaron afectadas otras partes que no debimos tocar, etc. En fin, varias situaciones pudieron haberse dado luego de despachar una acción.
En este artículo te mostraré dos paquetes de npm para poder estar al tanto de lo que sucede cada que una acción es despachada en tu app.
Ejemplo:
Tengo un array de 8 películas en mi estado global y una acción ADD\_FAVORITES es despachada cuando le doy click a un botón que tiene cada película. Además, en mi estado global tengo un array favorites recibe esa película y la concatena a sí misma para guardar todas mis películas favoritas.
1. Redux-logger
Cómo todo paquete npm la instalación la puedes realizar con un simple npm install redux-logger o en caso que utilices yarn puedes ejecutar yarn add redux-logger
Este paquete es un middleware, el cual intercepta toda acción despachada e imprime en consola, antes de ejecutar la función reductora, la acción que fue despachada junto con 3 datos importantes . Esos datos són:
- PrevState: El objeto que representa cómo está el estado global de la aplicación antes de ejecutar este cambio.
- Action: El objeto que recibe la función reductora para actualizar el estado global. Generalmente compuesto por 2 valores: El tipo de acción que se despachó y el objeto o array de objetos que se agregarán, encontrarán o eliminarán del estado.
- NextState: El objeto que representa cómo quedará el estado global luego de que la función reductora se ejecute.
Cómo se puede ver en la imagen. Previamente mi Array favorites estaba vacío, luego de ejecutar la acción ADD_FAVORITES el nuevo estado será el Array favorites con un elemento.
Para implementarlo solamente debes pasar como tercer parámetro de tu función createStore la función applyMiddleware (luego de importarla) y a su vez esta función recibirá el paquete logger como parámetro.
import {applyMiddleware, createStore} from "redux"
import {logger} from "redux-logger"
//... aquí va tú código
export default createStore(
reducer,
initialState,
applyMiddleware(logger, thunk)
)
2. Redux DevTools
Para instalarlo utiliza npm install redux-devtools-extension y con yarn sería yarn add redux-devtools-extension
Además de eso deberás descargar la extensión Redux DevTools para tu navegador. Para chrome lo encontrarás en la Chrome Web Store
Luego de eso deberás importar el paquete y envolver tu función applyMiddleware de tu createStore en store.js de la siguiente manera
import {composeWithDevTools} from "redux-devtools-extension"
//... aquí va tú código
export default createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(logger))
)
Una vez inicies tu aplicación encontrarás una nueva pestaña en tu sección DevTools de Chrome llamada Redux. Ahí podrás monitorear cada acción despachada y cada cambio.
Cada vez que el estado global de tu aplicación sea modificado podrás ver los cambios muy detalladamente. Utilizando el ejemplo del punto anterior se vería así.
A la izquierda verás un listado de todas las acciones que se han despachado hasta el momento. A la izquierda verás, por defecto, qué es lo que cambió en tu estado (diff), puedes ver este cambio en modo árbol (tree) o en modo completo/crudo (raw).
También puedes ver la pestaña State que te mostrará cómo quedó el estado global ahora que la función reductora ha sido ejecutada.
Te dejo cómo tarea probar las muchas opciones que trae esta extensión. Seguro que te divertirás.
Espero que este artículo te ayude y el desarrollo y manejo de tus aplicaciones con Redux sean mejores.
Hasta otra oportunidad.