Redux DevTools is een levensredder voor ontwikkelaars die werken aan complexe applicaties met een grote hoeveelheid data flow. Het stelt je in staat om eventuele wijzigingen in je Redux store tijdcapsule-stijl te visualiseren en te traceren. Volg deze stappen om Redux DevTools in jouw applicatie te gebruiken:
1. Installeer Redux DevTools Extensie: Je kunt de extensie downloaden op basis van de browser die je gebruikt. Voor Chrome, kun je het hier vinden: [Redux DevTools – Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).
1. Installeer Redux DevTools in uw applicatie: Je moet eerst de Redux DevTools pakket installeren in uw applicatie. Je kunt dit doen door de npm of yarn commando’s:
Voor NPM: \`\`\` npm install —save redux-devtools-extension \`\`\` Voor Yarn: \`\`\` yarn add redux-devtools-extension \`\`\` 1. Instrumenteer de Redux Store: Je moet de Redux store instrumenteren om Redux DevTools te gebruiken. Hier is hoe u het kunt doen: \`\`\`javascript import { createStore, applyMiddleware } from ‘redux’; import { composeWithDevTools } from ‘redux-devtools-extension’; const store = createStore( reducer, composeWithDevTools(applyMiddleware(…middleware)) // Beveel deze lijn aan als je ook middleware gebruikt. ); \`\`\` Nu zou je de Redux staat moeten kunnen zien in de Redux DevTools extensie wanneer je de applicatie draait.1. Gebruik de DevTools: Open uw applicatie in de browser, klik met de rechtermuisknop en selecteer “inspecteren” en ga dan naar het Redux tabblad. Je ziet nu alle acties die worden verzonden, huidige staat, en veranderingen in de staat na elke actie.
Om in tijd te kunnen “reizen”, klik je op een actie in de actielijst om de state te zien vóór en na de actie, evenals de actie zelf. Je kunt ook de “time-travel debugging” slider onderaan het scherm gebruiken om door de verschillende states te gaan.
1. Pauzeer en speel opgenomen acties af: Gebruik de pauzeerknop in de werkbalk om het opnemen van acties te stoppen. Terwijl het opnemen is gepauzeerd, worden alle verzonden acties genegeerd (de state wordt niet bijgewerkt). De afspeelknop zal door deze states gaan en ze reproduceren.
Hoe geavanceerder je applicatie, hoe nuttiger Redux DevTools wordt. Je kunt ook aangepaste acties verzenden via de “Dispatcher” knop in het gereedschap om handmatig nieuwe states te testen.
