Com s'utilitza Redux DevTool per depurar aplicacions React

Bloc

Com s'utilitza Redux DevTool per depurar aplicacions React

Com s'utilitza Redux DevTool per depurar aplicacions React

Redux és una de les biblioteques de gestió d'estats més adoptades per a aplicacions React a gran escala. A més de la seva capacitat per fer la vostra aplicació més predictible, l’ecosistema que ha evolucionat al seu voltant fa que Redux sigui la millor solució per a aplicacions a gran escala. Un altre avantatge de Redux és l'eina per a desenvolupadors que facilita el seguiment de quan, on, per què i com ha canviat l'estat de l'aplicació.

Analitzarem algunes funcions extraordinàries que Redux DevTool ofereix que us poden ajudar a depurar les vostres aplicacions més ràpidament.

Seguiment d’accions

Una altra característica sorprenent de Redux DevTools és veure la pila de trucades que ha activat l'acció. Podem seleccionar qualsevol acció de l'historial i veure'n la causa.

traçar accions

Per a aplicacions a gran escala en què es desencadenen les mateixes accions simultàniament des de diferents parts de les aplicacions, és difícil arribar a la causa principal de l'enviament de l'acció. Aquí és on la funció de rastreig és útil per als desenvolupadors.

Redux DevTool permet als desenvolupadors utilitzar la implementació predeterminada que es basa en Error.stack() o definiu una implementació personalitzada. Aquí teniu l'API per habilitar trace:

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, // (action) => { return ‘trace as string’; } traceLimit: 25, })

Com es veu, el trace l'argument també accepta mètodes. Aquest mètode es diu amb cada acció. Els desenvolupadors poden afegir una implementació personalitzada aquí per veure la causa de l'enviament de l'acció. Passar aquest mètode contra la propietat de rastreig permet als desenvolupadors supervisar només el rastre de les accions desitjades.

Això pot ajudar a mantenir l'experiència de desenvolupament fluida i eficaç, ja que es crea trace perquè cada acció pot consumir molta memòria. El mètode com trace pot ser útil per a accions enviades a través de biblioteques d'efectes secundaris com redux-saga o altres oients d'esdeveniments.

Quan no implementen un mètode de rastreig personalitzat, els desenvolupadors poden confiar en la implementació predeterminada que utilitza Error.stack() API. En aquest cas, traceLimit La propietat és útil per gestionar l'ús de memòria de DevTool. Substitueix els valors predeterminats del navegador de Error.stackTraceLimit i limita la longitud de la pila per a un consum de memòria optimitzat.

Seguiment d'accions als editors

Ampliant la capacitat de mostrar trace d'acció, Redux DevTool us permet navegar fins al punt exacte de la base de codis. Per a les bases de codis grans, això pot ser molt útil, ja que estalvia tones de temps útil per navegar fins a la ubicació exacta d’una base de codis gran.

L'editor es pot configurar des de la configuració d'extensions disponibles a la part inferior dreta del DevTool.

rastrejar accions als editors

Saltar accions

El viatge en el temps és una de les funcions més potents de Redux DevTools, ja que ens permet veure com l’estat de la nostra aplicació ha arribat al punt actual. En alguns casos, per analitzar el comportament de l’aplicació, és possible que haguem d’eliminar una acció concreta de la cronologia. Això no és possible dins del mecanisme de viatge en el temps. Redux DevTool té una bona manera de fer-ho. D’entre tres tipus de visualització diferents per al flux de la vostra aplicació, el monitor de registre i l’inspector us permeten desactivar o eliminar una acció de la cronologia. Aquí és com es veu.

reacciona repetint el component n vegades

saltar accions

Saltar a l'acció

A més de saltar l'estat de la línia de temps, els desenvolupadors poden saltar a l'estat desitjat sense haver de moure's per la línia de temps. Això permet als desenvolupadors moure’s ràpidament i veure la producció de l’aplicació en diferents estats intermedis. Els desenvolupadors també poden controlar l’impacte del salt a la línia de temps. Aquesta funció només està disponible amb el mode inspector.

saltant en acció

Enviament personalitzat

Redux DevTool ens permet enviar accions sense escriure cap codi. Podem afegir les nostres accions al distribuïdor i funciona igual que l’acció enviada mitjançant l’API Redux. Aquest tipus de burla ajuda a provar efectes secundaris i accions dependents. Aquesta característica es fa molt útil quan es combina amb el bloqueig a l'estat actual. Podem bloquejar l’estat a una etapa determinada i enviar accions des de DevTool per veure l’impacte a la botiga i controlar els efectes secundaris.

enviament personalitzat

enviament personalitzat 2

Accions de llista negra / llista blanca

Per a aplicacions a gran escala que consisteixen en diverses accions, només podem supervisar les accions desitjades o una altra manera és que apareguin a DevTool algunes accions a la llista negra. Això es pot fer afegint una llista negra o una llista blanca d'accions a la configuració de DevTool o inicialitzant-la a les nostres aplicacions.

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ actionsBlacklist: 'SOME_ACTION', // or actionsBlacklist: ['SOME_ACTION', 'SOME_OTHER_ACTION'] // or just actionsBlacklist: 'SOME_' to omit both })

Com s'ha vist, podem utilitzar actionsBlacklist / actionsWhitelist paràmetres en un argument a la inicialització o fer-ho mitjançant la configuració.

Persisteix a la botiga de recàrrega de la pàgina

Un dels punts dolorosos de les aplicacions a gran escala és el desenvolupament d’interfícies per estat que es deriven després d’un viatge dins de l’aplicació. Es fa encara més difícil quan alguns estats depenen dels efectes secundaris, per exemple, de les respostes de la xarxa. DevTool es posa al rescat, podem persistir certs estats nostres a través de la recàrrega de pàgines. Això us permetrà saltar directament a l’estat desitjat després de tornar a carregar sense tornar a fer el viatge.

Per fer-ho, feu clic al botó Persist a la barra inferior o afegiu ?debug_session= a la URL.
persistir

element div costat a costat

Ús en producció

És molt difícil predir o detectar tots els errors possibles a les nostres aplicacions. Trobem una sèrie de problemes després que les nostres aplicacions estiguin en producció i siguin utilitzades per un gran nombre d'usuaris. Per analitzar aquests errors, és possible que hàgim de veure el seguiment de les accions o l'estat actual de la nostra aplicació quan es va produir el problema. DevTool també ens permet veure un seguit d’accions i emmagatzemar en producció, cosa que facilita la reproducció de problemes.

Per seguretat i rendiment, es recomana utilitzar-lo acció i sanejament estatal opcions.

Bloqueig a l’estat actual

En les aplicacions on s’envien diverses accions amb freqüència, és possible que haguem d’analitzar la nostra aplicació en una posició intermèdia sense permetre que s’enviïn altres accions. Això es pot aconseguir bloquejant la nostra aplicació a l’estat actual. A diferència de la pausa, això congela la nostra aplicació a l'estat actual. Quan l'aplicació està bloquejada, encara podem fer viatges en el temps i altres accions enviades o desactivades.
bloqueig a l'estat actual

L’altre avantatge del bloqueig és que finalment tenim una solució per evitar efectes secundaris.

Fixa al subestat

A la majoria de les aplicacions de producció, l'estat es divideix en objectes petits subestats que normalment reflecteixen diferents mòduls de les aplicacions. Els casos de depuració poden requerir centrar-se en un subestat concret. En aquests casos, els desenvolupadors poden fixar-se al subestat i veure com afecten les diferents accions en aquest subestat fixat. Des del subestat es pot fixar Modes inspector i gràfic .

fixa al subestat

Fer accions

Per a aplicacions a gran escala, mai és fàcil passar per la llista de centenars d’accions. Més aviat, els desenvolupadors prefereixen controlar l'aplicació en trossos. Per a aquests casos, Redux DevTool permet als desenvolupadors comprometre el conjunt d’accions actuals. Llavors, l'estat actual es considera l'estat inicial de les properes accions. Un dels millors usos d’aquesta funció és supervisar l’estat entre transicions de pàgina.

Un cop compromès, també podeu tornar a aquest estat en qualsevol moment. Dit d’una altra manera, podeu afegir pivot al vostre estat i tornar-hi quan sigui necessari.
cometre accions

Els desenvolupadors poden confirmar l'estat des del mode Inspector, però per tornar a canviar, han de canviar al monitor de registre.

Conclusió

Sens dubte, Redux DevTool és una de les eines més útils i potents per depurar aplicacions React. Permet als desenvolupadors aprofitar al màxim la previsibilitat de l’aplicació proporcionada per Redux. També està disponible dins del depurador React Native, raó per la qual conèixer-lo en la seva mesura màxima pot accelerar el nostre desenvolupament i depuració al web i a les plataformes mòbils simultàniament.

Publicat originalment per Zain Sajjad a https://blog.logrocket.com

#reactjs #redux #webdev #javascript