Redux DevTools

Інструменти розробника це розширення браузера, яке додає зручний візуальний інтерфейс для налагодження змін стану програми та стеження за потоком даних у Redux, від відправлення дій до зміни стану.

Для початку необхідно додати розширення інструментів розробника у ваш браузер:

• Chrome Web Store
• Firefox Add-ons
• Edge Add-ons

Далі встановлюємо бібліотеку, яка дозволить ініціалізувати логіку Redux DevTools та зв'язати її з розширенням в інструментах розробника.

npm install @redux-devtools/extension

Ми поки що не використовуємо жодних додаткових можливостей Redux, тому імпортуємо функцію devToolsEnhancer і використовуємо її при створенні стора, передавши її результат третім аргументом, замість початкового стану.

src/redux/store.js

import { createStore } from "redux";import { devToolsEnhancer } from "@redux-devtools/extension";const initialState = {  tasks: [    { id: 0, text: "Learn HTML and CSS", completed: true },    { id: 1, text: "Get good at JavaScript", completed: true },    { id: 2, text: "Master React", completed: false },    { id: 3, text: "Discover Redux", completed: false },    { id: 4, text: "Build amazing apps", completed: false },  ],  filters: {    status: "all",  },};const rootReducer = (state = initialState, action) => {  return state;};// Створюємо розширення стора, щоб додати інструменти розробникаconst enhancer = devToolsEnhancer();export const store = createStore(rootReducer, enhancer);

Порядок аргументів

Якщо вам не потрібний початковий стан preloadedState, то значення enhancer передається другим аргументом. В іншому випадку - третім.

Після запуску проекту командою npm start, у стандартних інструментах розробника з'явиться нова вкладка Redux, при переході на яку відкриються Redux DevTools зі списком відправлених екшенів зліва та детальною інформацією про стан та екшени праворуч.