GELIŞTIRICI ARAÇLARI
Frontend Geliştirmelerinde Redux DevTools Nasıl Kullanabiliriz?
Redux ile Frontend Geliştirmelerinde kullanılan Redux DevTools eklentisinden bahsetmek istiyorum. Bu eklenti neden önemli ?Geliştirmelerde işlerimize nasıl yardımcı oluyor ?
--
Bugün üzerinde duracağımız araç Redux DevTools Aracı, Bu aracı kurma kısmını daha sonra anlatacağım. Öncelikle Redux konunu bilmiyorsunuz daha önceden yazmış olduğum aşağıdaki yazıları okumanızı öneririm.
Redux Store ile geliştirme yapıyoruz. Uygulama işletilirken altyapıda neler dönüyor anlamamız zor olabilir. Örneğin hata oluştu, geliştirme yapacağız bu işletimi nasıl anlayabiliriz?
- Console Log, Debug ile Console ekranına verileri basmak.
- Developer Tool üzerinden ilgili kaynak dosyasını erişip o kısımda debugging yapmak
- Redux DevTools ile uygulamanın State tutan ve değiştiren kısmı gözetleme.
Peki Developer Tools Redux Tabından veya kendi ekranından bastığımızda aşağdaki gibi bir ekran açılıyor.
Not: Bu kısımda eğer kendi store ilgili bilgileri görmüyorsanız. Aşağıdaki kodla Store oluşturken __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ redux vermemiz gerekiyor.
import { applyMiddleware, createStore, compose } from 'redux';
let middleware = applyMiddleware(promise, thunk);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(middleware);
const store = createStore(rootReducer, enhancer);Bunu tanımladığımızda ekranda aşağıdaki yapıyı bu araç üzerinden
monitor edebilimeli, veya kendimiz mock action oluşturup çalıştırabiliyor olsak çok iyi olurdu.
Redux DevTool aracının ekranına gittiğimizde araç içerisinde Inspector ve Default Web Sayfanızdakı React App seçili geldiğini görebilirsiniz. Bu kısmı açağıdaki görselde olduğu gibi değiştirebilirsiniz.
Not: Genelde bu kısımdaki konfigurasyon ile oynama ihtiyacı duymuyorsunuz genelde.
A. Inspector
Burda ilk olarak Dispatcher gelen Action listesine erişmek istediğimizde aşağıdaki ekran bize sunuyor.
Store üzerinde App State her bir Action komutu ile nasıl değişti olayını tek tek takip edebilmeniz için herhangi bir Action tıkladığınızda bu Action geldiği durumda
- Action detayı nedir?
- Store’daki State değeri nedir?
- Diff , değişen state daha görsel anlama
- Trace, debug.
- Test
Bizim bir zamana odaklamayı 2 noktadan yapabiliriz. Birisi ilgili action üzerinden
- Jump düğmesine basmak.
- Action slider üzerinden ileriye ve geriye gitme şeklinde.
A.1. Action Sekmesi
Dispatcher gelen Action komutunu farklı farklı arayüzlerde görüntüleyebilirsiniz.
- Tree View (Ağaç Formatında Görüntüleme)
- Chart View (Çizelge Formatında Görüntüleme)
- Raw View (Metin, Text Formatında Görüntüleme)
A.2 State, Diff, Trace ve Test Sekmeleri
State Sekmesi: Store içerisindeki tüm reducers state görüntüleyebilmemizi sağlıyor.
Bu araçta diğer bir güzel özellik te state içerisinde istediğiniz bir noktaya (pin) yaparak gidebilme, state içerisinde istediğimiz alt objelere odaklanabilme.
Diff Sekmesi: Store bir önceki durumu ile yeni durumu arasındaki geçişi daha net bir şekilde görebilmenizi sağlar.
Trace Sekmesi : İlgili Action gerçekleşirken Stack Trace gösterilmesini sağlayabilirsiniz. Bunun için yukarıda koda eklediğimiz config biraz değiştirmemiz gerekiyor. { trace: true, traceLimit: 25 } eklememiz gerekiyor.
let middleware = applyMiddleware(promise, thunk);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, traceLimit: 25 }) || compose;
const enhancer = composeEnhancers(middleware);
const store = createStore(rootReducer, enhancer);
Test Sekmesi: Sizin Reducer Action üzerindeki testlerinizi otomatik üretmenizi sağlayan bir araç. Bunu yaparken test template seçmenizede olanak sağlıyor. Örneğin aşağıdaki şablonlar ile test üretmenizi sağlıyor.
- Jest
- Mocha
- Tape
- Ava
A.3 Toolbar
Pause Recording: UI üzerinden Dispatcher komutlarının alınmasını durdurmayı sağlıyor. Ama uygulamadaki Store ve Action işleyişi devam ediyor.
Lock Changes: Uygulama üzerinde Redux yapısını kilitleyerek işletimi tamamen durduruyor.
Persist: Uygulama sayfası tekrar reload olsa bile Redux-Tool tutuğu bilgileri silinmesini engelliyor.
Dispatcher: Sanal Action oluşturup gönderip Store istediğiniz gibi güncelleyebilmenizi sağlıyor.
Import/Export: Mevcut State dışarı aktarma veya kaydedilen bir state tekrar buraya yüklemeyi sağlıyor.
Örnek Uygulama ve GitHub
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
