Redux · Giriş

Redux, bu günlerde ön uç geliştirmedeki en sıcak kitaplıklardan biridir. Bununla birlikte, birçok insanın ne olduğu ve faydalarının ne olduğu konusunda kafası karışmıştır.

Belgelerin belirttiği gibi, Redux, JavaScript uygulamaları için öngörülebilir bir durum kapsayıcıdır. Bunu yeniden ifade etmek gerekirse, geleneksel bir kitaplık veya Underscore.js ve AngularJS gibi bir çerçeve yerine bir uygulama veri akışı mimarisidir.

SmashingMag'de Daha Fazla Okuma

• Neden Mobil Uygulamanız İçin React Native'i Düşünmelisiniz?
• Uygulamalar, Oyunlar ve Mobil Web İçin Test Otomasyonu
• React, Node ve Express ile Sunucu Tarafı Oluşturma
• İstemci Tarafından Oluşturulan Erişilebilirlik Üzerine Notlar

Redux, Dan Abramov tarafından Haziran 2015'te oluşturuldu. Facebook'un Flux ve işlevsel programlama dili Elm'den ilham aldı. Redux, basitliği, küçük boyutu (sadece 2 KB) ve harika dokümantasyonu nedeniyle çok hızlı bir şekilde popüler oldu . Redux'un dahili olarak nasıl çalıştığını öğrenmek ve kütüphanenin derinliklerine dalmak istiyorsanız, Dan'in ücretsiz kursuna göz atmayı düşünün.

Redux, çoğunlukla uygulama durumu yönetimi için kullanılır. Özetlemek gerekirse, Redux tüm uygulamanın durumunu doğrudan değiştirilemeyen tek bir değişmez durum ağacında (nesne) tutar. Bir şey değiştiğinde, yeni bir nesne oluşturulur (eylemler ve azaltıcılar kullanılarak). Aşağıda temel kavramları ayrıntılı olarak inceleyeceğiz.

MVC ve Flux'tan Ne Kadar Farklıdır?

Bir bakış açısı vermek için, çoğu geliştirici buna aşina olduğu için klasik model-görünüm-kontrolör (MVC) modelini alalım. MVC mimarisinde veri (model), sunum (görünüm) ve mantık (kontrolör) arasında net bir ayrım vardır. Özellikle büyük ölçekli uygulamalarda bununla ilgili bir sorun var: Veri akışı çift yönlüdür. Bu, bir değişikliğin (bir kullanıcı girişi veya API yanıtı), koddaki birçok yerde bir uygulamanın durumunu etkileyebileceği anlamına gelir; örneğin, iki yönlü veri bağlama. Bakımı ve hata ayıklaması zor olabilir.

Flux, Redux'a çok benzer. Temel fark, Flux'un uygulamanın durumunu değiştiren birden fazla deposu olması ve bu değişiklikleri olay olarak yayınlamasıdır. Bileşenler, mevcut durumla senkronize etmek için bu olaylara abone olabilir. Redux, Flux'ta kayıtlı geri aramalara yükleri yayınlamak için kullanılan bir göndericiye sahip değildir . Flux'taki diğer bir fark, birçok çeşidin mevcut olması ve bu da biraz karışıklık ve tutarsızlık yaratmasıdır.

Redux'un Faydaları

“Neden Redux kullanmam gerekiyor?” Diye soruyor olabilirsiniz. Harika soru. Bir sonraki uygulamanızda Redux kullanmanın birkaç faydası vardır:

• sonucun öngörülebilirliği
  Geçerli durumun eylemler ve uygulamanın diğer bölümleriyle nasıl eşitleneceği konusunda hiçbir karışıklık olmadan her zaman bir doğruluk kaynağı vardır: mağaza.
• bakım
  Tahmin edilebilir bir sonuca ve katı bir yapıya sahip olmak, kodun bakımını kolaylaştırır.
• organizasyon
  Redux, kodun nasıl düzenlenmesi gerektiği konusunda daha katıdır, bu da kodun bir ekibin birlikte çalışması için daha tutarlı ve daha kolay olmasını sağlar.
• Sunucu oluşturma
  Bu, özellikle ilk oluşturma için çok kullanışlıdır ve daha iyi bir kullanıcı deneyimi veya arama motoru optimizasyonu sağlar. Sunucuda oluşturulan mağazayı istemci tarafına geçirmeniz yeterlidir.
• Geliştirici araçları
  Geliştiriciler, eylemlerden durum değişikliklerine kadar uygulamada olan her şeyi gerçek zamanlı olarak izleyebilir.
• Topluluk ve ekosistem
  Herhangi bir kitaplık veya çerçeve öğrenirken veya kullanırken bu çok büyük bir artıdır. Redux'un arkasında bir topluluğa sahip olmak, onu kullanmayı daha da çekici kılıyor.
• Test kolaylığı
  Test edilebilir kod yazmanın ilk kuralı, yalnızca tek bir şey yapan ve bağımsız olan küçük fonksiyonlar yazmaktır. Redux'un kodu çoğunlukla şu işlevlerden oluşur: küçük, saf ve yalıtılmış.

Fonksiyonel Programlama

Belirtildiği gibi, Redux, işlevsel programlama kavramları üzerine inşa edilmiştir. Bu kavramları anlamak, Redux'un nasıl ve neden bu şekilde çalıştığını anlamak için çok önemlidir. İşlevsel programlamanın temel kavramlarını gözden geçirelim:

• Fonksiyonları birinci sınıf nesneler olarak ele alabilir.
• Fonksiyonları argüman olarak iletebilir.
• Fonksiyonları, özyinelemeleri ve dizileri kullanarak akışı kontrol edebilir.
• Saf, özyinelemeli, üst düzey, kapatma ve anonim işlevleri kullanabilir.
• Harita, filtre ve küçültme gibi yardımcı işlevleri kullanabilir.
• Fonksiyonları birlikte zincirleyebilir.
• Durum değişmez (yani değişmez).
• Kod yürütme sırası önemli değildir.

Fonksiyonel programlama, daha temiz ve daha modüler kod yazmamızı sağlar. Kapsam ve mantık olarak izole edilmiş daha küçük ve daha basit işlevler yazarak, kodun test edilmesini, bakımını ve hata ayıklamasını çok daha kolay hale getirebiliriz. Şimdi bu daha küçük işlevler yeniden kullanılabilir kod haline geliyor ve bu, daha az kod yazmanıza izin veriyor ve daha az kod iyi bir şey. Fonksiyonlar herhangi bir değişiklik yapılmadan herhangi bir yere kopyalanıp yapıştırılabilir. Kapsam olarak izole edilmiş ve yalnızca bir görevi yerine getiren işlevler, bir uygulamadaki diğer modüllere daha az bağımlı olacaktır ve bu azaltılmış bağlantı, işlevsel programlamanın bir başka avantajıdır.

İşlevsel JavaScript ile çalışırken, diğer şeylerin yanı sıra saf işlevleri, anonim işlevleri, kapanışları, üst düzey işlevleri ve yöntem zincirlerini çok sık göreceksiniz. Redux, saf işlevleri yoğun bir şekilde kullanır, bu nedenle ne olduklarını anlamak önemlidir.

Saf işlevler , kendilerine iletilen bağımsız değişkenlere dayalı olarak yeni bir değer döndürür. Varolan nesneleri değiştirmezler; bunun yerine yenisini iade ederler. Bu işlevler, çağrıldıkları duruma dayanmazlar ve sağlanan herhangi bir bağımsız değişken için yalnızca bir ve aynı sonucu döndürürler. Bu nedenle, çok öngörülebilirler.

Saf işlevler herhangi bir değeri değiştirmediğinden, kapsam veya gözlemlenebilir yan etkiler üzerinde herhangi bir etkileri yoktur ve bu, bir geliştiricinin yalnızca saf işlevin döndürdüğü değerlere odaklanabileceği anlamına gelir.

Redux Nerelerde Kullanılabilir?

Çoğu geliştirici, Redux'u React ile ilişkilendirir, ancak diğer herhangi bir görünüm kitaplığı ile kullanılabilir. Örneğin, Redux'u AngularJS, Vue.js, Polymer, Ember, Backbone.js ve Meteor ile kullanabilirsiniz. Redux plus React, yine de en yaygın kombinasyondur. React'i doğru sırayla öğrendiğinizden emin olun: En iyi rehber, React'i kullanmaya başlayan ve ekosistemde olup biten her şeyden bunalan geliştiriciler için çok yararlı olan Pete Hunt's kılavuzudur. JavaScript yorgunluğu, hem yeni hem de deneyimli ön uç geliştiriciler arasında meşru bir endişedir, bu nedenle React veya Redux'u doğru sırayla ve doğru şekilde öğrenmek için zaman ayırın.

Redux'un harika olmasının sebeplerinden biri ekosistemidir. Pek çok makale, öğretici, ara katman yazılımı, araç ve ortak bilgi mevcuttur. Şahsen ben David Zukowski'nin standart kitabını kullanıyorum çünkü React, Redux ve React Router ile bir JavaScript uygulaması oluşturmak için gereken her şeye sahip. Bir uyarı: React ve Redux gibi yeni çerçeveler öğrenirken standart kalıpları ve başlangıç ​​kitlerini kullanmamaya çalışın. Daha da kafa karıştırıcı hale getirecek çünkü her şeyin birlikte nasıl çalıştığını anlamayacaksınız. Önce bunu öğrenin ve ideal olarak bir yan proje olarak çok basit bir uygulama oluşturun ve ardından zamandan tasarruf etmek için üretim uygulamaları için ortak kalıpları kullanın.

Redux'un Yapı Parçaları

Redux kavramları karmaşık veya süslü gelebilir, ancak bunlar basittir. Kütüphanenin sadece 2 KB olduğunu unutmayın. Redux'un üç yapı parçası vardır: eylemler, depo ve redüktörler.

Her birinin ne yaptığını tartışalım.

Hareketler

Özetle, eylemler olaylardır. Eylemler, uygulamadan (kullanıcı etkileşimleri, API çağrıları gibi dahili olaylar ve form gönderimleri) verileri mağazaya gönderir. Mağaza yalnızca eylemlerden bilgi alır. Dahili eylemler, eylemin türünü ve mağazaya gönderilen bilgi yükünü tanımlayan type özelliğine (genellikle sabit) sahip basit JavaScript nesneleridir.

 { type: LOGIN_FORM_SUBMIT, payload: {username: 'alex', password: '123456'} }

Eylemler, eylem oluşturucularla oluşturulur. Kulağa açık geliyor, biliyorum. Bunlar yalnızca eylemleri döndüren işlevlerdir.

 function authUser(form) { return { type: LOGIN_FORM_SUBMIT, payload: form } }

Uygulamanın herhangi bir yerinde eylemleri çağırmak çok kolaydır. dispatch yöntemini şu şekilde kullanın:

 dispatch(authUser(form));

redüktörler

İşlevsel JavaScript'te bir indirgeyicinin ne olduğunu zaten tartışmıştık. Bir geri aramayı (indirgeyici) kabul ettiği ve birden çok değerden, tamsayıların toplamından veya bir değer akışı birikiminden tek bir değer elde etmenizi sağlayan dizi azaltma yöntemini temel alır. Redux'ta indirgeyiciler, uygulamanın mevcut durumunu ve bir eylemi alan ve ardından yeni bir durum döndüren işlevlerdir (saf). Redüktörlerin nasıl çalıştığını anlamak önemlidir çünkü işin çoğunu onlar gerçekleştirir. İşte mevcut durumu ve bir eylemi argüman olarak alan ve ardından bir sonraki durumu döndüren çok basit bir indirgeyici:

 function handleAuth(state, action) { return _.assign({}, state, { auth: action.payload }); }

Daha karmaşık uygulamalar için Redux tarafından sağlanan combineReducers() yardımcı programını kullanmak mümkündür (gerçekten de önerilir). Uygulamadaki tüm redüktörleri tek bir indeks redüktöründe birleştirir. Her redüktör, uygulamanın durumunun kendi bölümünden sorumludur ve durum parametresi her redüktör için farklıdır. combineReducers() yardımcı programı, dosya yapısının bakımını çok daha kolay hale getirir.

Bir nesne (durum) yalnızca bazı değerleri değiştirirse, Redux yeni bir nesne oluşturur, değişmeyen değerler eski nesneye atıfta bulunur ve yalnızca yeni değerler oluşturulur. Bu performans için harika. Daha da verimli hale getirmek için Immutable.js ekleyebilirsiniz.

 const rootReducer = combineReducers({ handleAuth: handleAuth, editProfile: editProfile, changePassword: changePassword });

Mağaza

Store, uygulama durumunu tutan ve duruma erişmek, eylemleri göndermek ve dinleyicileri kaydetmek için birkaç yardımcı yöntem sağlayan nesnedir. Tüm devlet tek bir mağaza tarafından temsil edilir. Herhangi bir işlem, redüktörler aracılığıyla yeni bir durum döndürür. Bu, Redux'u çok basit ve öngörülebilir kılar.

 import { createStore } from 'redux'; let store = createStore(rootReducer); let authInfo = {username: 'alex', password: '123456'}; store.dispatch(authUser(authInfo));

Geliştirici Araçları, Zaman Yolculuğu ve Hızlı Yeniden Yükleme

Redux'la çalışmayı kolaylaştırmak için, özellikle büyük ölçekli bir uygulamayla çalışırken Redux DevTools'u kullanmanızı öneririm. Durumun zaman içindeki değişikliklerini, gerçek zamanlı değişiklikleri, eylemleri ve mevcut durumu göstermesi inanılmaz derecede yararlıdır. Bu, console.log mevcut durumu ve eylemlerinden kaçınarak zamandan ve emekten tasarruf etmenizi sağlar.

Redux, Flux'tan biraz farklı bir zaman yolculuğu uygulamasına sahiptir. Redux'da önceki bir duruma geri dönebilir ve hatta o noktadan itibaren durumunuzu farklı bir yöne götürebilirsiniz. Redux DevTools, Redux iş akışında aşağıdaki "zaman yolculuğu" özelliklerini destekler (bunları durumunuz için Git komutları olarak düşünün):

• Sıfırla : mağazanızın oluşturulduğu duruma sıfırlanır
• Geri Dön : son taahhüt edilen duruma geri döner
• Süpür : yanlışlıkla başlatmış olabileceğiniz tüm devre dışı bırakılmış eylemleri kaldırır
• Commit : mevcut durumu ilk durum yapar

Zaman yolculuğu özelliği üretimde verimli değildir ve yalnızca geliştirme ve hata ayıklama amaçlıdır. Aynı şey DevTools için de geçerli.

Redux, temel olarak işlevsel JavaScript kullandığı ve küçük bağımsız işlevlerin test edilmesi kolay olduğu için testi çok daha kolay hale getirir. Bu nedenle, durum ağacınızda bir şeyi değiştirmeniz gerekirse, o durumdan sorumlu olan yalnızca bir redüktörü içe aktarın ve onu ayrı ayrı test edin.

Bir Uygulama Oluşturun

Bu giriş kılavuzunu bitirmek için, Redux ve React kullanarak çok basit bir uygulama oluşturalım. Herkesin takip etmesini kolaylaştırmak için ECMAScript 2015 ve 2016'yı olabildiğince az kullanarak düz eski JavaScript'e bağlı kalacağım. Bu gönderide daha önce başlatılan oturum açma mantığına devam edeceğiz. Bu örnek herhangi bir canlı veri kullanmaz, çünkü bu uygulamanın amacı Redux'un çok basit bir uygulamanın durumunu nasıl yönettiğini göstermektir. CodePen'i kullanacağız.

1. Tepki Bileşeni

Bazı React bileşenlerine ve verilerine ihtiyacımız var. Basit bir component yapalım ve sayfada render edelim. Bileşenin bir giriş alanı ve bir düğmesi olacaktır (bu çok basit bir oturum açma formudur). Aşağıda, durumumuzu temsil eden bir metin ekleyeceğiz:

2. Olaylar ve Eylemler

Projeye Redux ekleyelim ve buton için onClick olayını ele alalım. Kullanıcı oturum açar açmaz, LOGIN türü ve mevcut kullanıcının değeri ile eylemi göndeririz. Bunu yapmadan önce, bir mağaza oluşturmalı ve ona bir argüman olarak bir redüktör işlevi iletmeliyiz. Şimdilik, redüktör sadece boş bir fonksiyon olacaktır:

3. Redüktörler

Artık eylemin tetiklenmesine sahip olduğumuza göre, redüktör bu eylemi gerçekleştirecek ve yeni bir durum döndürecektir. Oturum açma durumunu döndüren LOGIN eylemini ele alalım ve daha sonra kullanabilmemiz için bir LOGOUT eylemi ekleyelim. auth azaltıcı iki parametreyi kabul eder:

1. mevcut durum (varsayılan değere sahiptir),
2. eylem.

4. Mevcut Durumu Görüntüleme

Şimdi, başlangıç ​​durumumuz (redüktördeki varsayılan değer) ve React bileşeni hazır olduğuna göre, durumun nasıl göründüğüne bakalım. En iyi uygulama, durumu alt bileşenlere indirgemektir. Yalnızca bir bileşenimiz olduğu için, uygulamanın durumunu auth bileşenlerine bir özellik olarak iletelim. Her şeyin birlikte çalışmasını sağlamak için, ReactDOM.render bir işleve sararak ve onu store.subscribe() ileterek, bir subscribe yardımcı yöntemiyle mağaza dinleyicisini kaydetmemiz gerekir:

5. Oturum Aç ve Kapat

Artık oturum açma ve oturum kapatma eylem işleyicilerimiz olduğuna göre, bir oturum kapatma düğmesi ekleyelim ve LOGOUT eylemini gönderelim. Son adım, bu oturum açmayı oluşturma yönteminin dışına taşıyarak ve değişkeni aşağıda oluşturarak hangi düğmenin oturum açma veya oturum kapatma görüntüleneceğini yönetmektir:

Çözüm

Redux her gün çekiş kazanıyor. Birçok şirket (Uber, Khan Academy, Twitter) tarafından ve birçok projede (Apollo, WordPress' Calypso) başarıyla üretimde kullanılmıştır. Bazı geliştiriciler, çok fazla ek yük olduğundan şikayet edebilir. Çoğu durumda, düğme tıklamaları veya basit kullanıcı arayüzü değişiklikleri gibi basit eylemleri gerçekleştirmek için daha fazla kod gerekir. Redux her şey için mükemmel bir seçim değildir. Bir denge olmalı. Belki basit eylemler ve kullanıcı arayüzü değişiklikleri Redux mağazasının bir parçası olmak zorunda değildir ve bileşen düzeyinde korunabilir.

Redux, uygulamanız veya çerçeveniz için ideal bir çözüm olmasa da, özellikle React uygulamaları için kontrol etmenizi şiddetle tavsiye ederim.

Ön sayfa görseli: Lynn Fisher, @lynnandtonic