Redux - Devtools
Redux-Devtools, Redux uygulamaları için hata ayıklama platformu sağlıyor. Zaman yolculuğu hata ayıklama ve canlı düzenleme yapmamızı sağlar. Resmi belgelerdeki bazı özellikler aşağıdaki gibidir -
Her durumu ve eylem yükünü incelemenizi sağlar.
Eylemleri "iptal ederek" zamanda geriye gitmenizi sağlar.
İndirgeyici kodunu değiştirirseniz, her "aşamalı" eylem yeniden değerlendirilecektir.
Redüktörler atarsa, hatayı ve bunun hangi eylem sırasında gerçekleştiğini belirleyebiliriz.
KalıcıState () mağaza geliştiricisi ile sayfa yeniden yüklemelerinde hata ayıklama oturumlarını sürdürebilirsiniz.
Redux geliştirme araçlarının aşağıda verildiği gibi iki çeşidi vardır -
Redux DevTools - Paket halinde kurulabilir ve aşağıda belirtildiği gibi uygulamanıza entegre edilebilir -
https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md#manual-integration
Redux DevTools Extension - Redux için aynı geliştirici araçlarını uygulayan bir tarayıcı uzantısı aşağıdaki gibidir -
https://github.com/zalmoxisus/redux-devtools-extension
Şimdi Redux geliştirme aracının yardımıyla eylemleri nasıl atlayabileceğimizi ve zamanda geriye nasıl gidebileceğimizi kontrol edelim. Aşağıdaki ekran görüntüleri, öğelerin listesini almak için daha önce gönderdiğimiz eylemleri açıklar. Burada denetçi sekmesinde gönderilen eylemleri görebiliriz. Sağ tarafta, size durum ağacındaki farkı gösteren Demo sekmesini görebilirsiniz.
Kullanmaya başladığınızda bu araca aşina olacaksınız. Sadece bu Redux eklenti aracından gerçek kodu yazmadan bir eylem gönderebilirsiniz. Son satırdaki Dağıtıcı seçeneği bu konuda size yardımcı olacaktır. Öğelerin başarıyla getirildiği son işlemi kontrol edelim.
Sunucudan yanıt olarak bir dizi nesne aldık. Sayfamızdaki listeyi görüntülemek için tüm veriler mevcuttur. Aynı zamanda sağ üst taraftaki durum sekmesine tıklayarak mağazanın durumunu da takip edebilirsiniz.
Önceki bölümlerde, zamanda yolculuk hata ayıklamasını öğrendik. Şimdi bir eylemi nasıl atlayacağımızı kontrol edelim ve uygulamamızın durumunu analiz etmek için zamanda geri dönelim. Herhangi bir eylem türüne tıkladığınızda, iki seçenek: 'Atla' ve 'Atla' görünecektir.
Belirli bir eylem türünde atla düğmesine tıklayarak belirli eylemi atlayabilirsiniz. Sanki eylem hiç olmamış gibi davranır. Belirli eylem türlerinde atlama düğmesine tıkladığınızda, sizi o eylemin gerçekleştiği duruma götürür ve sırayla kalan tüm eylemleri atlar. Bu şekilde, belirli bir eylem gerçekleştiğinde durumu koruyabileceksiniz. Bu özellik, uygulamada hata ayıklama ve hataları bulmada kullanışlıdır.
Son eylemi atladık ve arka plandaki tüm listeleme verileri kayboldu. Öğelerin verilerinin gelmediği ve uygulamamızın sayfada görüntülenecek verisi olmadığı zamana kadar geri gider. Aslında kodlamayı ve hata ayıklamayı kolaylaştırır.