#5 ReduxJS - redux-devtools

poster
В этом уроке мы разберем redux-devtools. Это плагин для хрома, который позволяет дебажить redux приложения.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. В этом уроке мы разберем, что такое 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 и передаем ему начальные значения и екшен и тестируем какой будет стейт в конце.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Алексей Полупроводник
1год назад назад
Здравствуйте, такой вопрос, а в продакшн вы оставляете devtools? т.е. в продакшн вы так пишете: const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); Или же в продакшн не имеет смысла юзать devtools, так как он не нужен и нужно оставлять так: const store = createStore(playlist)? Просто я наткнулся на одну статью, где сказано, что многие удаляют из продакшна redux devtools, а на самом деле devtools может быть полезен. Прикрепляю ссылку на статью: https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f Что вы думаете по этому поводу?
monsterlessons
1год назад назад
Статья отличная. В продакшене devtools конечно лучше отключать. Хотя, конечно, он удобен для дебага на продакшене). Если делать по нормальному, то отключать на продакшене, но давать возможность включить его при каком-то секретном ключе. http://google.com?pleaseDebug=true. Ну и конечно, как и говорится в статье, никогда не хранить приватные данные в сторе, если он доступен публично. Но это уже больше здравый смысл, а не конкретно redux store.