Narzędzia

Redux Devtools Extension

Najpopularniejszym i najprzydatniejszym narzędziem jakie powinniśmy dodać do naszego projektu jest niewątpliwie redux-devtools-extension składające się z 2 części: enhancera oraz UI (występującego albo w postaci dodatku do naszego projektu, albo jako rozszerzenie do przeglądarki - zdecydowanie polecam to drugie).

Enhancery to mechanizm pozwalający na dodanie nowych możliwości do samego store - jest to potężniejsza wersja middleware.

Narzędzie to pozwala nam na:

  • obserwowanie dispatchowanych akcji, stanu po każdej z nich oraz diffu poprzedniego i aktualnego stanu,
  • przeskakiwanie pomiędzy akcjami (wstecz, do przodu),
  • zapisywanie historii akcji jako plik .json i jego wczytywanie w innej przeglądarce,
  • ręczne dispatchowanie akcji

Instalacja

Narzędzie to nie wymaga instalacji żadnych pakietów npm (zakładając, że używamy wersji dla przeglądarek) a jedynie konfiguracji naszego store.

Jeżeli nie używamy żadnych innnych enhancerów ani middleware, wystarczy że wywołamy:

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

Jeżeli używamy jakieś middleware:

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk, invariant)
));

Następnym krokiem powinna być instalacja rozszerzenia dla naszej przeglądarki:

Używanie

Jeżeli całość przebiegła pomyślnie w przeglądarce pojawi się nowa ikona rozszerzenia, a po kliknięciu w nią pojawi się UI:

"Redux devtools"

← Testowanie reduxa