#5 ReduxJS - redux-devtools

Всем привет. В этом уроке мы разберем, что такое redux-devtools. Это специальное расширение для браузера, которое позволяет легко дебажить redux приложения.

Для установки из Chrome Web Store, переходим по этой ссылке и установить его в свой хром.

Теперь нам нужно изменить наш createStore, чтобы он подключался с redux-devtools. Для этого вторым параметром в createStore передадим

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

То есть если у нас найдено расширение redux-devtools, мы применяем его как второй аргумент метода createStore. Теперь если мы откроем браузер, то мы видим вкладку Redux в которой мы можем дебажить наше приложение.

Самая часто используемая функция - это посмотреть redux store. Для этого нажимаем state и видим initial state нашего приложения.

Давайте добавим трек Fade to black. Слева от store у нас отображаются наши екшены. И мы видим, что после того, как мы добавили трек у нас отобразился новый екшен ADD_TRACK. Екшен @@INIT, который мы видим до этого, всегда выстреливает, когда redux инициализируется.

Кликая по екшенам слева, мы видим, как меняется наш store справа. То есть мы можем по шагам каждого екшена дебажить как меняется наш store.

Нажав diff мы видим, что именно изменилось в store. Нажав action - мы видим как выглядит наш екшен, который выстрелил, какой у него type, и какие данные мы передаем.

Также мы можем скипать екшены. Давайте добавим еще 1 трек Back in black. Если мы нажимаем skip, то екшен пропускается и мы видим, что ничего не ломается, а просто этот екшен не применяется к store.

На каждом екшене пишется время, которое прошло с момента последнего екшена. Это удобно, если екшены асинхронные и вы хотите узнать, сколько времени прошел запрос от start до success.

Также вы можете диспатчить екшены прямо из redux-devtools. Для этого кликаем Dispatcher и пишем там

{
  type: 'ADD_TRACK',
  payload: 'One more song'
}

Также вы можете посмотреть как написать тесты на какой-то екшен. Для этого нашимаем на какой-то екшен и выбираем вкладку test. Здесь показан маленький пример как протестировать наш екшен. Мы импортируем наш reducer и передаем ему начальные значения и екшен и тестируем какой будет стейт в конце.