REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Organizasyon Yapısını Güncelleme
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Not: Bu yazı daha önce yazılan bir serinin parçası olduğu için önceki yazılara bu linkteki Admin Tool Mekanikleri grubundan ulaşabilirsiniz.
Önceki yazıda organizasyon yapısının gösterimi üzerinde durmuştuk.(Önceki yazıların linkleri bu yazının önceki yazı serisini linkindeki Admin Tool Mekanikleri grubundan bulabilirsiniz) Bu yazıda bu yapıyı biraz daha genişleterek güncelleme işlemlerini nasıl yapacağımız üzerinde duracağız.
- Ağaç düğümleri üzerinde (+ , -) düğmeleri ile yeni düğüm ekleme veya mevcut düğümü silme.
- Bu işlemi yaparken ana content ekranında ilgili (title ve desc) alanlarını güncelleyebilme
Adım 1 Önce store tarafındaki işlemleri düşünelim. Bize Client Side addAccountTreeNode , delAccountTreeNode ve düğmelerini ekleyelim
Adım 2. Bu 2 düğmenin onClick sırasında nasıl çalışacağını geliştirelim.
Adım 3. AccountTreeCompContainer bu Ekleme ve Silme işlemlerini Store iletecek mekanizmayı geliştirelim.
Adım 4. Reducer kısmında Ekleme işlemini gerçekleştirelim.
Adım 5. Reducer kısmında Silme işlemini gerçekleştirelim.
Adım 6 . Şimdi Geldi Content kısmında güncelleme yapmaya. + düğmesine basınca içerisinde Sample metniyle doldurum bir ağaç düğümü oluşturuyor ama bunun içeriğini güncelleyebilmeliyiz. Bunun için Content formundaki kullanıcı etkileşimlerini yakalayan kodları yazalım.
Adım 7. ContentComp aynı yukarıdaki AccountTreeComp store bağlamaya benzer şekilde store action oluşturması daha sonrada bunun reducer tarafından ele alınıp update edilmesini gerçekleştirelim.
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
