Redux Nedir: Bir Tasarımcının Kılavuzu

Redux'u duydun mu? Bu ne? Googling yok, lütfen!

• "Fantezi arka uç şeyler."
• "Duydum ama ne olduğunu bilmiyorum. Belki de bir React çerçevesidir?”
• "Bir React uygulamasında durumları depolamanın ve yönetmenin daha iyi bir yolu."

Bu soruyu 40'tan fazla tasarımcıya sordum. Yukarıdakiler tipik cevaplarıdır. Birçoğu Redux'un React ile çalıştığının ve işinin “devlet yönetimi” olduğunun farkında.

Ama bu “devlet yönetimi”nin gerçekte ne anlama geldiğini biliyor musunuz? Redux'un gerçek gücünün devleti yönetmenin ötesinde olduğunu biliyor musunuz? Redux'un çalışması için mutlaka React gerektirmediğini biliyor musunuz? Redux'u kullanıp kullanmama konusunda ekibinizin tartışmasına (veya en azından öğle yemeği sohbetlerine) katılmak ister misiniz? Redux'un nasıl çalıştığını anlayarak tasarım yapmak ister misiniz?

Bu makalenin yardımıyla size Redux'un tam bir resmini göstermek istiyorum : ne yapabilir, neden yapar, dezavantajları nelerdir, ne zaman kullanılır ve tasarımla nasıl ilişkilidir.

Amacım sizin gibi tasarımcılara yardımcı olmak. Daha önce tek satır kod yazmamış olsanız bile, Redux'u anlamanın hala mümkün ve faydalı (ve eğlenceli) olduğunu düşünüyorum. Sade İngilizce ve karalamalar bekleyin - kod veya soyut konuşmalar yok.

Sürüşe hazır mısınız?

Redux Nedir?

Süper yüksek düzeyde Redux, geliştiricilerin hayatlarını kolaylaştırmak için kullandıkları bir araçtır. Birçoğunuzun duymuş olabileceği gibi, işi “devlet yönetimi”dir. Devlet yönetiminin ne anlama geldiğini birkaç bölüm sonra açıklayacağım. Bu noktada, sizi bu resimle baş başa bırakıyorum:

Neden Bakım Yapmalısınız?

Redux, bir uygulamanın görünümü ve hissinden çok, iç işleyişiyle ilgilidir. Dik bir öğrenme eğrisi olan biraz karmaşık bir araçtır. Bu, tasarımcılar olarak bundan uzak durmamız gerektiği anlamına mı geliyor?

Hayır. Bence onu kucaklamalıyız. Bir araba tasarımcısı motorun ne için olduğunu anlamalıdır, değil mi? Uygulama arayüzlerini başarılı bir şekilde tasarlamak için tasarımcılar, kaputun altındaki şeyler hakkında da sağlam bilgiye sahip olmalıdır . Ne yapabileceğini öğrenmeli, geliştiricilerin onu neden kullandığını anlamalı ve avantajlarının ve sonuçlarının farkında olmalıyız.

“Tasarım sadece göründüğü ve hissettirdiği şey değildir. Tasarım nasıl çalıştığıdır.”

— Steve Jobs

Redux Ne Yapabilir?

Birçok kişi, React uygulamalarında durumu yönetmek için Redux'u kullanır. Vahşi doğada en yaygın kullanım durumudur ve Redux, React'in iyi sonuç vermediği (henüz) yönleri iyileştirir.

Ancak, yakında Redux'un gerçek gücünün bunun çok ötesine geçtiğini göreceksiniz. Devlet yönetiminin gerçekte ne anlama geldiğini öğrenerek başlayalım.

Durum Yönetimi

Bu "durumun" ne anlama geldiğinden emin değilseniz, onu daha genel bir terimle değiştirelim: "veri". Durum, zaman zaman değişen verilerdir . Durum, kullanıcı arabiriminde neyin görüntüleneceğini belirler.

devlet yönetimi ne demek? Genel olarak, bir uygulamada yönetmemiz gereken verilerin üç yönü vardır:

1. Verileri alma ve saklama
2. UI öğelerine veri atama
3. Verileri değiştirme

Diyelim ki bir Dribbble şut sayfası oluşturuyoruz. Sayfada görüntülemek istediğimiz veri nedir? Yazarın profil fotoğrafını, adını, animasyonlu GIF'i, kalp sayısını, yorumları vb. içerir.

Öncelikle tüm bu verileri buluttaki bir sunucudan alıp bir yere koymamız gerekiyor. Ardından, verileri gerçekten görüntülememiz gerekiyor. Bu verilerin parçalarını, tarayıcıda gerçekte gördüğümüzü temsil eden ilgili UI öğelerine atamamız gerekiyor. Örneğin, profil fotoğrafının URL'sini bir HTML img etiketinin src niteliğine atarız:

 <img src='https://url/to/profile_photo'>

Son olarak, verilerdeki değişiklikleri ele almamız gerekiyor. Örneğin, bir kullanıcı bir Dribbble çekimine yeni bir yorum eklerse veya bir yıldız eklerse, HTML'yi buna göre güncellememiz gerekir.

Devletin bu üç yönünü koordine etmek, ön uç geliştirmede büyük bir rol oynar ve React'in bu görev için çeşitli derecelerde desteği vardır . Bazen React'teki yerleşik tesis yeterince iyi çalışır. Ancak uygulama daha karmaşık hale geldikçe, durumunu yalnızca React ile yönetmek zorlaşabilir. Bu yüzden birçok kişi Redux'u alternatif olarak kullanmaya başlar.

Verileri Alma ve Saklama

React'te bir kullanıcı arayüzünü bileşenlere ayırıyoruz. Bu bileşenlerin her biri daha küçük bileşenlere ayrılabilir (bkz. “React Nedir?”).

Kullanıcı arayüzümüz bu şekilde yapılandırılmışsa, kullanıcı arayüzünü doldurmadan önce verileri ne zaman ve nerede saklayacağız?

Her bileşende yaşayan bir şef olduğunu hayal edin . Sunuculardan veri almak, yemek hazırlamak için gereken tüm malzemeleri tedarik etmek gibidir.

Naif bir yol, verileri nerede ve ne zaman gerektiğinde getirmek ve depolamaktır. Bu, her şefin doğrudan uzaktaki çiftliklerden sebze ve et almaya gitmesi gibidir.

Bu yaklaşım israftır. Aynı veriler için bile birçok bileşenden sunucuyu birçok kez aramamız gerekir. Şefler ileri geri seyahat ederek çok fazla gaz ve zaman harcarlardı.

Redux ile verileri bir kez alırız ve uygun bir şekilde "depolama" olarak adlandırılan merkezi bir yerde saklarız. Veriler daha sonra herhangi bir bileşen tarafından her zaman kullanıma hazırdır. Bu, yakınlarda şeflerimizin tüm malzemeleri satın alabilecekleri bir süper mağazaya sahip olmaktan farklı değil. Süpermarket, sebzeleri ve etleri çiftliklerden toplu olarak geri taşımak için kamyonlar gönderiyor. Tek tek şeflerden çiftliklere gitmelerini istemekten çok daha verimli!

Mağaza aynı zamanda gerçeğin tek kaynağı olarak da hizmet eder. Bileşenler, verileri başka bir yerden değil, her zaman mağazadan alır. Bu, tüm UI içeriğini tutarlı tutar.

UI Öğelerine Veri Atama

Yalnızca React ile veri almanın ve depolamanın aslında daha iyi bir yolu var. Çok nazik şefimiz Shotwell'den tüm şef arkadaşlarının alışverişini yapmasını isteyebiliriz. Çiftliklere bir kamyon sürer ve güzellikleri geri getirirdi. Örneğin, Dribbble örneğindeki "Shot" bileşeni gibi bir kapsayıcı bileşeninden veri alabilir ve bunu tek gerçek kaynağı olarak kullanabiliriz.

Bu yaklaşım, her bileşenden veri almanın saf yolundan daha etkilidir. Peki Shotwell malzemeleri diğer şeflere nasıl aktarıyor? Veriler, gerçekte HTML öğelerini oluşturan bileşenlere nasıl iletilir? Veriler hedefe ulaşana kadar dış bileşenlerden bir röledeki baton gibi iç bileşenlere veri aktarıyoruz.

Örneğin, yazar avatarının URL'sinin “Shot”tan “ShotDetail”e, “Title”a ve son olarak da <img> etiketine geçirilmesi gerekir. Şeflerimiz bir apartman dairesinde yaşıyorsa, gerçekten şöyle görünür:

Verileri hedefe ulaştırmak için, verilere hiç ihtiyaçları olmasa bile yoldaki tüm bileşenleri devreye sokmamız gerekir. Çok kat varsa gerçekten can sıkıcı olurdu!

Süper mağaza kapıdan kapıya teslimat yaparsa ne olur? Redux ¹ ile, diğer bileşenleri etkilemeden herhangi bir bileşene herhangi bir veriyi şu şekilde ekleyebiliriz:

¹ Kesinlikle doğru olmak gerekirse, verileri Redux'un kendisine değil, React bileşenlerine react-redux adlı başka bir kitaplıktır. Ancak tepki-redux sadece tesisatı yaptığından ve insanlar neredeyse her zaman Redux ve tepki-redux'u birlikte kullandıklarından, bunu Redux'un faydalarından biri olarak dahil etmenin iyi olduğunu düşünüyorum.

Not : React'in (16.3) en son sürümünde, bileşenlere veri ekleme açısından hemen hemen aynı işi yapan yeni bir "bağlam" API'si vardır. Bu nedenle, ekibinizin Redux kullanmasının tek nedeni buysa, ciddi olarak React 16.3'e yükseltmeyi düşünün! Daha fazla bilgi için resmi belgeye göz atın (uyarı: ileride çok sayıda kod var).

Verileri Değiştirme

Bazen bir uygulamadaki verileri güncelleme mantığı oldukça karmaşık olabilir. Birbirine bağlı birden fazla adım içerebilir. Uygulama durumunu güncellemeden önce birden çok sunucudan gelen yanıtları beklememiz gerekebilir. Eyaletteki birçok yeri farklı zamanlarda, farklı koşullar altında güncellememiz gerekebilir.

Tüm bu mantık için iyi bir yapımız yoksa bunaltıcı olabilir. Kodu anlamak ve sürdürmek zor olurdu.

Redux, bölmemizi ve fethetmemizi sağlar . Veri güncelleme mantığını küçük “redüktörlere” bölmek için standart bir yol sağlar. Bu redüktörler, karmaşık bir eylemi tamamlamak için birlikte uyumlu bir şekilde çalışır.

Yine de, React'in son gelişimine bir göz atın. "Context" API'sinde olduğu gibi, React'in gelecekteki bir sürümünde yeni bir "setState" API olabilir. Karmaşık güncelleme mantığını daha küçük parçalara ayırmayı kolaylaştırır. Bu yeni API kullanıma sunulduğunda, durum yönetiminin bu yönünü yönetmek için artık Redux'a ihtiyacınız olmayacak.

Redux'un Gerçek Gücü

Şimdiye kadar, Redux sadece React için bir yara bandı gibi görünüyor. İnsanlar, React'in (henüz) iyi yapmadığı yönleri geliştirmek için Redux'u kullanıyor. Ancak React hızla yetişiyor! Aslında, Redux'un yaratıcısı Dan Abramov, birkaç yıl önce Facebook'taki React çekirdek ekibine katıldı. React: bağlam API'sinde (16.3'te yayınlandı), daha iyi veri getirme API'sinde (Şubat 2018'de gösterildi), daha iyi bir setState API'sinde ve benzeri iyileştirmeler üzerinde çalışmakla meşguller.

Redux'u eski mi yapacak?

Bil bakalım ne oldu? Henüz size Redux'un gerçek gücünü göstermedim!

Redux, geliştiricileri birkaç katı kuralı takip etmeye zorlar, bu da Redux'a çok fazla güç getirir (evet, disiplinin gücü!):

1. Tüm veriler (uygulama durumu) açık metin olarak tanımlanmalıdır. Tüm verileri bir kalemle kağıda yazabilmelisiniz.
2. Her eylem (veri değişikliği) açık metin olarak tanımlanmalıdır. Herhangi bir şeyi değiştirmeden önce ne yapacağınızı yazmalısınız. İşaret bırakmadan verileri değiştiremezsiniz. Bu işleme Redux argosunda "eylem gönderme" denir.
3. Verileri değiştiren kodunuz bir matematik formülü gibi davranmalıdır. Aynı girdi verildiğinde aynı sonucu döndürmelidir. 4'ün karesi, kaç kez çalıştırırsanız çalıştırın, her zaman 16'dır.

Uygulamalar oluşturmak için bu kuralları izlediğinizde sihir gerçekleşir. Aksi takdirde uygulanması zor veya pahalı olan birçok harika özellik sağlar. İşte bazı örnekler. ²

² Bu örnekleri Dan Abramov'un “You Might Not Need Redux” yazısından ve “React Acemi Soru Konusu”ndan topladım.

Geri Al, Yinele

Popüler geri al/yinele özelliği, sistem düzeyinde planlama gerektirir. Geri alma/yineleme, uygulamadaki her bir veri değişikliğini kaydetmesi ve yeniden yürütmesi gerektiğinden, bunu mimaride en başından dikkate almalısınız. Eğer sonradan düşünülmüşse, sayısız hata için bir reçete olan birçok dosyanın değiştirilmesini gerektirecektir.

Redux, her eylemin açık metin olarak tanımlanmasını gerektirdiğinden, geri alma/yineleme desteği neredeyse ücretsiz olarak gelir. Redux ile geri almanın/yinelemenin nasıl uygulanacağına ilişkin talimatlar basit bir sayfaya sığar.

İşbirliği Ortamı

Birden çok kullanıcının karmaşık bir görev üzerinde birlikte çalıştığı Google Dokümanlar'a benzer bir uygulama oluşturuyorsanız Redux kullanmayı düşünün. Muhtemelen sizin için çok fazla halter yapacak.

Redux, olup bitenleri ağ üzerinden göndermeyi çok kolaylaştırır. Başka bir kullanıcının başka bir makinede gerçekleştirdiği eylemleri almak, değişiklikleri yeniden oynatmak ve yerel olarak olanlarla birleştirmek kolaydır.

İyimser kullanıcı arayüzü

İyimser kullanıcı arayüzü, bir uygulamanın kullanıcı deneyimini iyileştirmenin bir yoludur. Uygulamanın yavaş bir ağ üzerinden daha hızlı yanıt veriyor gibi görünmesini sağlar. Bu, örneğin birinci şahıs nişancı oyunu gibi gerçek zamanlı yanıtlar gerektiren uygulamalarda popüler bir stratejidir.

Basit bir örnek olarak, Twitter uygulamasında, bir tweet'in kalbe tıkladığınızda, sunucunun birkaç kontrol yapmasını istemesi gerekir, örneğin o tweetin hala var olup olmadığı. Sonuç için birkaç saniye beklemek yerine, uygulama hile yapmayı seçiyor! Her şeyin yolunda olduğunu varsayar ve hemen dolu bir kalp gösterir.

Bu yaklaşım işe yarar çünkü çoğu zaman her şey yolundadır. İşler yolunda gitmediğinde, uygulama önceki UI güncellemelerini geri alır ve sunucudan gelen gerçek sonucu uygular, örneğin bir hata mesajı gösterir.

Redux, geri alma ve yineleme için yaptığı gibi iyimser kullanıcı arayüzünü destekler. Sunucudan olumsuz bir sonuç alındığında veri değişikliklerini kaydetmeyi, tekrar oynatmayı ve geri almayı kolaylaştırır.

Kalıcı ve Durumdan Önyükleme

Redux, bir uygulamada olup bitenleri depoya kaydetmeyi kolaylaştırır. Daha sonra, bilgisayar yeniden başlatılsa bile, uygulama tüm verileri yükleyebilir ve hiç kesintiye uğramamış gibi tam olarak aynı noktadan devam edebilir.

Redux ile bir oyun kurarsanız, oyunun ilerlemesini kaydetmek/yüklemek için kodun geri kalanını değiştirmeden birkaç satır daha koda ihtiyacınız olur.

Gerçekten Genişletilebilir Sistemler

Redux ile, bir uygulamadaki herhangi bir veriyi güncellemek için bir eylemi "göndermeniz" gerekir. Bu kısıtlama, bir uygulamada olup bitenlerin neredeyse her yönüne bağlanmayı mümkün kılar.

Her işlevin kullanıcı tarafından özelleştirilebileceği gerçekten genişletilebilir uygulamalar oluşturabilirsiniz. Örneğin, Redux ile oluşturulmuş bir terminal uygulaması olan Hyper'a göz atın. "Hipergüç" uzantısı, imlece serpintiler ekler ve pencereyi sallar. Bu “vay” modunu nasıl buldunuz? (Belki çok kullanışlı değil ama kullanıcıları etkilemeye yetiyor)

Zamanda Yolculuk Hata Ayıklama

Bir uygulamada hata ayıklarken zamanda yolculuk yapmaya ne dersiniz? Uygulamayı çalıştırın, hata oluştuğunda tam yeri bulmak için birkaç kez geri veya ileri sarın, hatayı düzeltin ve onaylamak için yeniden oynatın.

Redux, geliştiricilerin bu hayalini gerçeğe dönüştürüyor. Redux DevTools, bir kaydırıcıyı sürükleyerek, çalışan bir uygulamanın ilerlemesini bir YouTube videosu olarak değiştirmenize olanak tanır!

O nasıl çalışır? Redux'un uyguladığı üç katı kuralı hatırlıyor musunuz? İşte sihrin gizli sosu.

Otomatik Hata Raporları

Şunu hayal edin: Bir kullanıcı uygulamanızda yanlış bir şey bulur ve hatayı bildirmek ister. Özenle hatırlıyor ve ne yaptığını anlatıyor. Ardından geliştirici, hatanın tekrar oluşup oluşmadığını görmek için adımları manuel olarak izlemeye çalışır. Hata raporu belirsiz veya yanlış olabilir. Geliştirici, hatanın nerede olduğunu bulmakta zorlanıyor.

Şimdi, buna ne dersin? Kullanıcı "Hata bildir" düğmesini tıklar. Sistem, yaptıklarını otomatik olarak geliştiriciye gönderir. Geliştirici, "Hatayı tekrar oynat" düğmesini tıklar ve bu hatanın tam olarak nasıl olduğunu izler. Böcek yerinde ezilir, herkes mutludur!

Redux Bug Reporter'ı kullanırsanız tam olarak bu olur. O nasıl çalışır? Redux kısıtlamaları harikalar yaratır.

Redux'un Dezavantajları

Redux'un uyguladığı üç ana kural, iki ucu keskin bir kılıçtır. Güçlü özellikler sağlarlar, ancak aynı zamanda kaçınılmaz olumsuzluklara neden olurlar.

Dik Öğrenme Eğrisi

Redux, nispeten dik bir öğrenme eğrisine sahiptir. Kalıplarını anlamak, hatırlamak ve alışmak zaman alır. Her ikisi de sizin için yeniyse Redux ve React'i aynı anda öğrenmeniz önerilmez.

"Genelge kodu

Çoğu durumda Redux kullanmak daha fazla kod yazmak anlamına gelir. Basit bir özelliğin çalışması için genellikle birden fazla dosyaya dokunmak gerekir. İnsanlar Redux ile yazmak zorunda kalacakları "genel bilgiler" kodundan şikayet ediyorlardı.

Biliyorum, bu kulağa çelişkili geliyor. Redux'un özellikleri minimum kodla uygulamayı mümkün kıldığını söylemedim mi? Bu biraz bulaşık makinesi kullanmaya benziyor. İlk olarak, bulaşıkları sıralar halinde yerleştirmek için dikkatli bir şekilde zaman harcamanız gerekir. O zamana kadar bulaşık makinesinin faydalarını görmeyeceksiniz: bulaşıkları gerçekten temizlemek, bulaşıkları sterilize etmek vb. için zamandan tasarruf. Hazırlama süresinin buna değip değmeyeceğine karar vermelisiniz!

Performans Cezası

Redux, uyguladığı kısıtlamalar nedeniyle performans üzerinde de bir etkiye sahip olabilir. Veriler değiştiğinde biraz ek yük ekler. Çoğu durumda, bu önemli bir şey değildir ve yavaşlama fark edilmez. Yine de, mağazada büyük miktarda veri olduğunda ve veriler sık ​​sık değiştiğinde (örneğin, kullanıcı bir mobil cihazda hızlı bir şekilde yazarken), bunun sonucunda UI yavaşlayabilir.

Bonus: Redux Sadece Tepki İçin Değildir

Yaygın bir yanlış anlama, Redux'un yalnızca React için olduğudur. Redux, React olmadan hiçbir şey yapamaz gibi görünüyor. Aslında Redux, daha önce tartıştığımız gibi, React'i birkaç önemli şekilde tamamlar. En yaygın kullanım durumudur.

Ancak aslında Redux, Angular, Ember.js ve hatta jQuery ve hatta Vanilla JavaScript gibi herhangi bir ön uç çerçeve ile çalışabilir. Google'da aramayı deneyin, bunu, bunu, bunu ve hatta bunu bulacaksınız. Redux'un genel fikirleri her yerde geçerlidir!

Redux'u akıllıca kullandığınız sürece, yalnızca bir React uygulamasında değil, birçok durumda faydalarından yararlanabilirsiniz.

Çözüm

Herhangi bir araç gibi, Redux da bir ödünleşim sunar. Güçlü özellikler sağlar, ancak aynı zamanda kaçınılmaz dezavantajları vardır. Geliştirme ekibinin işi, verilen ödünün buna değip değmediğini değerlendirmek ve bilinçli bir karar vermektir.

Tasarımcılar olarak Redux'un avantajlarını ve dezavantajlarını anlarsak, tasarım açısından bu karara katkıda bulunabiliriz. Örneğin, potansiyel performans etkisini azaltmak için kullanıcı arayüzünü tasarlayabilir miyiz? Belki bir tekne dolusu onay iletişim kutusunu kaldırmak için geri alma/yineleme özelliklerinin dahil edilmesini savunabiliriz? Belki de nispeten düşük bir maliyetle kullanıcı deneyimini iyileştirdiği için iyimser bir kullanıcı arayüzü önerebiliriz?

Bir teknolojinin faydalarını ve sınırlamalarını anlayın ve buna göre tasarlayın. Sanırım Steve Jobs'un "tasarım nasıl çalıştığıdır" derken kastettiği buydu.