Redux DevTools è uno strumento molto utile per monitorare e tracciare l’evoluzione dello stato di un’applicazione basata su Redux. Ecco come iniziare a utilizzarlo:
1. Installazione:
- Per Google Chrome, Mozilla Firefox o Microsoft Edge, scarica e installa l’estensione Redux DevTools dallo store estensioni del tuo browser.
- Per le applicazioni React Native, Electron, o qualsiasi altra applicazione che funziona al di fuori del browser, puoi installare il pacchetto redux-devtools-extension tramite npm.
1. Connessione Redux Store:
- Una volta installato, devi permettere alla tua applicazione di utilizzare Redux DevTools. Per fare ciò, devi modificare il modo in cui crei il tuo store Redux. Di solito, dovresti avere un codice simile a questo:
```
import { createStore } from ‘redux’;
import rootReducer from ‘./reducers/index’;
const store = createStore(rootReducer);
```
- Devi modificarlo per utilizzare Redux DevTools:
```
import { createStore } from ‘redux’;
import rootReducer from ‘./reducers/index’;
const store = createStore(
rootReducer,
window.REDUX_DEVTOOLS_EXTENSION && window.__REDUX_DEVTOOLS_EXTENSION__()
);
```
1. Uso di Redux DevTools:
- Ora che il tuo negozio Redux è collegato a Redux DevTools, puoi aprire le DevTools nel tuo browser e dovrebbe esserci una scheda Redux presente.
- Puoi vedere l’evoluzione del tuo stato nel tempo, puoi saltare alcune azioni, e puoi anche vedere il diff dello stato tra diverse azioni.
Nota: Ricorda che Redux DevTools può rendere l’app un po’ più lenta a causa del tracciamento delle modifiche di stato, quindi potrebbe essere una buona idea disabilitarlo in produzione. Puoi farlo facilmente aggiungendo un controllo per vedere se l’ambiente corrente è lo sviluppo:
```
const store = createStore(
rootReducer,
process.env.NODE_ENV === ‘development’ && window.REDUX_DEVTOOLS_EXTENSION ?
window.__REDUX_DEVTOOLS_EXTENSION__() : undefined
);
```
