Redux Nedir: Bu kütüphane hakkında bilmeniz gereken her şey

Eğer hala bilmiyorsan Redux nedirBu yazıda bu kütüphane hakkında bilmeniz gereken her şeyi açıklamaya odaklanacağız. JavaScript, ayrıca kullanımları, nasıl kullanılabileceği vb. Bu şekilde, onu bir sonraki JS projelerinize entegre edebilmek için gerekli tüm araçlara sahip olacaksınız.

Redux'un nasıl bir şey olduğunu görelim!

JavaScript nedir?

JavaScript (JS), yorumlanmış bir programlama dilidir. ECMAScript standardının bir lehçesi olarak kabul edilir ve nesne yönelimli, prototip tabanlı, zorunlu, zayıf tipli ve dinamik olmasıyla karakterize edilir. Adına rağmen Java ile karıştırılmamalıdır. Oluşturulması, Sun Microsystems'in (Java'nın yaratıcısı) Netscape Navigator (LiveScript'in yaratıcısı) tarafından satın alınması ve programlama dilinin isim değişikliğinin ardından ticari kaygılara dayanmaktadır.

Esasen istemci tarafında kullanılır, web tarayıcılarının ayrılmaz bir parçasını oluşturur. Bu, kullanıcı arayüzünü geliştirmenize ve dinamik web sayfaları oluşturmanıza olanak tanır. Ek olarak, Sunucu tarafı JavaScript veya SSJS olarak bilinen JavaScript, sunucu tarafında kullanılabilir. Uygulanabilirliği web'in ötesine uzanır; PDF belgelerinde ve masaüstü uygulamalarında, özellikle widget'larda vb. kullanım alanı bulur.

La JavaScript sözdizimi C++ ve Java gibi dillerinkine benzer, Java'dan adlar ve kurallar almasına rağmen adı da buradan gelir. Ancak daha önce de belirttiğim gibi, benzer adlarına rağmen Java ve JavaScript'in farklı anlam ve amaçlara sahip olduğunu belirtmek önemlidir.

Öte yandan, JavaScript'in Belge Nesne Modeli'nin (DOM) bir uygulamasını kullandığını ve bunun JS, tarayıcıların yerel olarak anladığı tek programlama dilidir. Başlangıçta, HTML web sayfalarında, sunucuya erişimi olmayan istemcideki işlemler için kullanıldı. Ancak günümüzde, genellikle AJAX gibi teknolojilerle birlikte, sunucudan bilgi göndermek ve sunucudan bilgi almak için yaygın olarak kullanılmaktadır. İfadeler HTML koduyla birlikte indirilirken JavaScript, kullanıcı aracısında yorumlanır.

JS Uygulamaları

JavaScript, aşağıdakiler gibi çeşitli uygulamalarda ve bağlamlarda yaygın olarak kullanılan bir programlama dilidir:

• Web Geliştirme: Web geliştirmede önemlidir. Web siteleri ve web uygulamalarında etkileşimi ve kullanıcı deneyimini geliştirmek için kullanılır. Diğerlerinin yanı sıra etkileşimli formların, görsel efektlerin, gerçek zamanlı veri doğrulamaların ve dinamik gezinmenin oluşturulmasında kullanılır. İçinde mevcut:
  • Web ön ucu: Ön uç geliştirmenin temel taşıdır. React, Angular ve Vue.js gibi çerçeveler ve kitaplıklar, web uygulamalarında etkileşimli ve dinamik kullanıcı arayüzleri oluşturmak için JavaScript'e güvenir.
  • Web arka ucu: Node.js gibi platformlar aracılığıyla, eksiksiz web uygulamaları oluşturmak için sunucu tarafında JavaScript kullanılır. Bu, geliştiricinin bir uygulamanın hem ön ucunda hem de arka ucunda JavaScript kullanmasına olanak tanıyarak verileri senkronize etmeyi ve gerçek zamanlı uygulamalar oluşturmayı kolaylaştırır.
  • Sunucu uygulamaları: Diğer sunucu tarafı dilleri kadar yaygın olmasa da, Node.js aracılığıyla sunucu uygulaması geliştirmede JavaScript kullanılmaktadır. Bu, özellikle gerçek zamanlı uygulamalar ve çok sayıda eşzamanlı isteği işleyen uygulamalar için kullanışlıdır.
• Mobil uygulamalar: React Native ve Ionic gibi çerçeveler kullanılarak hibrit mobil uygulamaların geliştirilmesinde kullanılır. Bu çerçeveler, geliştiricilerin uygulamayı iOS ve Android gibi birden fazla platformda bir kez yazıp çalıştırmasına olanak tanır.
• Çevrimiçi oyunlar: Çevrimiçi oyunların ve tarayıcı oyunlarının geliştirilmesinde kullanılır. Phaser ve Three.js gibi kitaplıklar, tarayıcıda etkileşimli 2D ve 3D oyunlar oluşturmayı kolaylaştırır.
• Masaüstü uygulamaları: Electron gibi araçlar sayesinde HTML, CSS ve JavaScript gibi web teknolojilerini kullanarak platformlar arası masaüstü uygulamaları oluşturmak mümkündür.
• Tarayıcı Uzantıları: Web tarayıcılarına ek işlevsellik eklemek için uzantılar kullanılır. Bu uzantılar genellikle JavaScript'te yazılır.
• Nesnelerin İnterneti (IoT) Uygulamaları: API'ler ve özel kütüphaneler aracılığıyla donanım ve sensörlerle iletişim kurabilmesi nedeniyle IoT cihazları için uygulama ve sistem geliştirmede kullanılır.

Redux nedir ve nasıl çalışır?

Redux açık kaynaklı bir JavaScript kütüphanesidir uygulamalarda durumu yönetmek için kullanılır ve Elm işlevsel dilinden etkilenir. Kullanıcı arayüzleri oluşturmak için genellikle React veya Angular gibi diğer kütüphanelerle birleştirilir. Flux adlı Facebook kütüphanesinden ilham alan Dan Abramov ve Andrew Clark tarafından tasarlandı.

Genel olarak konuşursak, Redux küçük bir kütüphanedir. Basit ve sınırlı API, uygulama durumu için öngörülebilir bir kapsayıcı görevi görecek şekilde tasarlanmıştır. İşleyişi, fonksiyonel programlamadaki "azaltma" kavramına benzer.

Redux'un geçmişi XNUMX'lere kadar uzanıyor 2015, Dan Abramov'un Redux'un ilk versiyonunu geliştirmeye başladığı yıl React Europe konferansında Hot Reloading hakkında bir konuşma yapmaya hazırlanırken. Bu işlem sırasında Abramov, Flux modeli ile redüktör fonksiyonu arasındaki benzerliği fark etti. Bu gözlem onu ​​bir Flux deposunun gerçekten bir indirgeyici fonksiyon olup olamayacağını merak etmeye yöneltti.

Bu fikri gerçekleştirmek için Abramov, Flummox adlı Flux uygulamasının yazarı Andrew Clark ile temasa geçti. Birlikte Redux'u hayata geçirmek için işbirliği yaptılar ve tutarlı bir API tanımladılar. Ek olarak, şu yeteneği de uyguladılar: ara yazılım ve mağaza geliştiricileri kullanan uzantıMevcut Redux ekosistemine önemli ölçüde katkıda bulunarak olanaklarını daha da genişletiyor.

Redux ve React ilişkisi: React nedir

React bir JavaScript kütüphanesidir Çok yönlülüğü bu tanımın ötesine geçse de kullanıcı arayüzleri oluşturmaya odaklanıyor. Başlangıçta Facebook tarafından geliştirilen bu araç, açık kaynak olup, tek sayfalı web uygulamaları (SPA), Android uygulamaları ve iOS dahil olmak üzere çeşitli uygulamalarda hızlı bir şekilde kullanıcı arayüzleri oluşturma yeteneği nedeniyle yaygın olarak kullanılmaktadır.

Angular gibi daha karmaşık yaklaşımlar sunan diğer çerçevelerden farklı olarak React, kullanıcı arayüzleri oluşturma yeteneğiyle öne çıkıyor verimli bir şekilde. Bu, mantık ve kullanıcı arayüzünü tek bir dosyada birleştiren ve bileşenler adı verilen birimler halinde düzenlenen .jsx dosyalarının kullanılmasıyla gerçekleştirilir.

Sanal DOM: nedir bu?

ReactJS dünyasına baktığımızda muhtemelen ReactJS kavramını sıklıkla duyarız. Sanal DOM. Bu fikir ustaca bir fikirden kaynaklanıyor: Gerçek DOM'un tamamını güncellemek yerine yalnızca gerçekten değişiklik gerektiren kısmı değiştiriyoruz. Eski JavaScript uygulamalarında, sunucudan JSON formatında veri alırdık ve ardından oluşturulacak tamamen yeni bir HTML oluştururduk, bu da her değişiklikte sayfanın tamamının yenilenmesiyle sonuçlanırdı.

Projenize Redux nasıl kurulur ve yapılandırılır

Bilmek istiyorsan Redux nasıl kurulurGerçek şu ki, hiç de karmaşık değil. Bunu yapmak için terminale gitmeli ve oradan aşağıdaki komutu çalıştırmalısınız:

npm i -S redux

Artık Redux'un kararlı sürümü sisteminizde yüklü. Elbette, Node.js paket yöneticisi npm'nin kurulu olması gibi bazı bağımlılıkları muhtemelen çözmeniz gerekecektir. Bu işlem tamamlandıktan sonra artık projelerinizi oluşturmaya başlayabilmeniz için Redux'un avantajlarından da yararlanmanız gereken React'ı ve geliştirme araçlarını kuracağız.

Bu diğer paketleri kurmak için uygulamanız gereken komutlar şunlardır:

npm i -S tepki-redux npm i -D redux-devtools

Artık başlamaya hazır her şeye sahip olacaksınız. Redux'un kurulu olduğu ana klasör veya dizine giderseniz, STORE, REDUCERS, ACTIONS, TYPES gibi birkaç alt dizin veya alt klasörün olduğunu göreceksiniz. Her birinin ne olduğunu bilmelisiniz:

• EYLEMLER: Bunlar iki özelliğe sahip olması gereken nesnelerdir; biri eylemin türünü (TYPE) açıklar, diğeri ise uygulamanın durumunda nelerin değiştirilmesi gerektiğini açıklar.
• REDÜKTÖRLER- İndirgeyiciler eylemlerin davranışını uygulayan işlevlerdir. Eylemin açıklamasına ve durum değişikliğinin açıklamasına bağlı olarak uygulamanın durumunu değiştirirler.
• MAĞAZA: Eylemlerin ve azaltıcıların buluştuğu, uygulamanın durumunu koruduğu ve değiştirdiği yerdir. Sadece bir tane var.
• TÜRLERİ: Daha önce de söylediğim gibi eylem türüdür.

Pratik örnek: Redux ile uygulama oluşturma

Un Redux kullanarak örnek Redux kullanılarak basit bir muhasebe uygulamasının yapıldığı aşağıdaki olabilir. Ancak bunu yapmak için öncelikle Redux'u yapılandırmanız ve eylemlerinizi ve azaltıcılarınızı tanımlamanız gerekir:

// Redux kitaplıklarını içe aktarın 'redux'tan { createStore }'u içe aktarın; // Eylemleri tanımlayın const IncrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Redüktörü tanımlayın const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; 'DECREMENT' durumu: dönüş durumu - 1; varsayılan: dönüş durumu; } }; // Redux mağazasını oluşturun const store = createStore(counterReducer); // Mağazadaki değişikliklere abone olun Store.subscribe(() => { console.log('Geçerli sayaç durumu:', Store.getState()); }); // Durumu değiştirmek için eylemleri gönder Store.dispatch(incrementAction); Store.dispatch(incrementAction); Store.dispatch(decrementAction);

Bu Redux'un nasıl kullanılacağına dair çok basit bir örnektir. Daha büyük bir uygulamada, daha karmaşık eylemler ve azaltıcılar tanımlayabilir ve mağazanın durumuna erişip güncellemek için React bileşenlerini bağlayabilirsiniz. Ama en azından bu size nasıl çalıştığına dair bir fikir verir...