Primul pas este cel mai ușor de înțeles și de completat. Sperăm că folositi Firefox sau Chrome, deoarece acestea sunt cele mai rapide pentru a intra în funcțiune.

Accesați următoarele linkuri și instalați extensia sau extensia browserului:

• Firefox
• Chrome

Această extensie este importantă pentru conectarea browserului la aplicația Redux. Fără aceasta, nu veți putea încărca uneltele din consola dvs.

Există mai multe modalități diferite de a vă conecta noile instrumente dev. Acest lucru se datorează faptului că aplicațiile redux pot fi atât de diferite. Astfel, necesitatea de a avea opțiuni diferite. În opinia mea, acesta este cel mai robust și mai ușor de creat.

1. npm install --save redux-devtools-extension
2. import { composeWithDevTools } from ‘redux-devtools-extension’; în fișier.
3. În cele din urmă, compuneți magazinul cu modulul importat:

   import { composeWithDevTools } from 'redux-devtools-extension';
   
   const store = createStore(reducer, composeWithDevTools(
     applyMiddleware(...middleware),
     // other store enhancers if any
   ));

Vă recomandăm să utilizați această opțiune in defavoarea celorlalte, deoarece ajută la evitarea problemelor cu aplicații isomorfice. De asemenea, permite o mulțime de personalizari ale instrumentelor consolei dev.

De asemenea, dacă în aplicația dvs. nu aveți programe de îmbunătățire / middleware, există o abordare mai directă:

import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify custom devTools options
));

Observați că folosim devToolsEnhancer mai degrabă decât compozitorWithDevTools.
 Cheia aici este că composeWithDevTools este necesar atunci când magazinul dvs.
 Redux are nevoie de amplificatoare. În caz contrar, puteți folosi doar devToolsEnhancer.