Photo by Dattatreya Patra on Unsplash

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
Wireframe Yapısı

Adım 1 Önce store tarafındaki işlemleri düşünelim. Bize Client Side addAccountTreeNode , delAccountTreeNode ve düğmelerini ekleyelim

Action Düğmeleri Tree ekleyelim

Adım 2. Bu 2 düğmenin onClick sırasında nasıl çalışacağını geliştirelim.

AccountTreeeComp Add and Delete Action Handlers

Adım 3. AccountTreeCompContainer bu Ekleme ve Silme işlemlerini Store iletecek mekanizmayı geliştirelim.

AccountTreeCompContainer Trigger Actions

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.

Content Ekranını Aksiyonları Bağlayalı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.

Content Update Store Yazalım.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store