React’e Giriş, Bölüm 3
Geçen hafta, React bileşeninin başvuru durumumuzun grafik temsilinden (bir kısmı) daha fazla olmadığını gördük. Uyguladığımız örnekte, bileşen, değeri eklemeyi veya azaltmayı mümkün kılan iki düğme ile ortak sayaç değerini gösterir. Hile basittir: sahne bileşenleri veri ve işlevler şeklinde olabilir. Şimdiye kadar, bu öğreticinin Bölüm 1 ve Bölüm 2. bölümünden öğrendiğimiz iki ana fikir:
React bileşeni, bir özellik koleksiyonu alan ve onu oluşturmak için gereken HTML üreten saf bir işlevdir.
React bileşeni tarafından alınan özellik, (a) UI’de görüntülenmesi gereken veriler ve (b) DOM olayına geri arama olarak bağlandıktan sonra uygulamamızın durumunu değiştiren işlevler şeklinde olabilir.
Bu üçüncü bölümde bilgimizi bu mimari hakkında biraz genişleteceğiz ve WordPress mağazasını nasıl kullanacağımızı öğreneceğiz. Onlarla birlikte, uygulamamızın durumunu temiz, test edilmiş bir şekilde belirleyebilir ve kullanıcı arayüzüne bağlı değil.
Bu öğreticinin ikinci bölümünde örneğimizi genişleterek, değeri eklemek veya azaltmak için birkaç düğmeli bir sayaç yapıyoruz. Bunu yapmak için, onu değiştirmek için işlevle birlikte index.js dosyasında değiştirilebilecek değişkenler ekleriz. Hesaplama Bileşenlerimiz: Dışa Aktar Const Counter = ({Değer, OninTecrease, OnDecrease}) => (
Sayaç: {value}
+
Yeni sayılar ekleyin
MÜCADELEYEN SİL X
Tezgahın değerini ayarlayın
Tüm uygulamalarımızın bir listesini alın
Hesaplama x değerini belirleyin
Ancak farklı bir yaklaşım kullanmak isteyebilirsiniz (örneğin, bunu azaltmak için belirli sayımlar ve farklı işlevler eklemek için işlevler yapmak isteyebilirsiniz). Bu arayüzü tanımladıktan sonra, bu durumu izlemek için ihtiyacınız olan bilgileri düşünmelisiniz ve Özellikle, bunu yapmak için kullanacağınız verileri yapılandırın. Örneğimizde, birkaç katlayıcıyı izlemek istiyoruz ve her X -Counter için değeri bilmek istiyoruz. Hangi veri yapısı bu çabada bize yardımcı olabilir? Ne X’e bağlı olarak, bir veri yapısı veya diğerini kullanmak isteyebilirsiniz. Örneğin, X bir hesaplama dizin ise (yani, birinci, ikinci veya üçüncü hesaplama değerini alabilmek istiyorsanız, sayı dizisi yeterli olabilir. X’in sayaçların benzersiz bir tanımlaması olmasını istiyorsanız, farklı bir yaklaşım kullanmak isteyebilirsiniz. Örneğin, ortak kimliği/değeri olan bir sözlük kullanmak isteyebilirsiniz:
const tezgahları = {ae13a: 0, f18bb: 3, e889a: 1, 8b1d3: -5,}; Veya nesne dizisi: const counters = [{id: ‘ae13a’, değer: 0}, {id: ‘f18bb’, değer: 3}, {id: ‘e889a’, değer: 1}, {id: ‘8b1d3’ , Değer: -5},]; Uygulamanızın durumunu manipüle etmek ve erişmek için arayüzü (Setter ve Getter, isterseniz) tanımlarsanız, durumun kendisini uygulama şekliniz kara bir kutudur. Bu, mağazanın kendisini herhangi bir zamanda değiştirebileceğiniz anlamına gelir ve yangını koruduğunuz sürece her şey beklendiği gibi çalışacaktır.
WordPress WordPress veri modüllü Redux tabanlı bir mağaza oluşturmak, uygulamanızın durumunu yönetmek için bir veya daha fazla mağaza belirlemenizi sağlar. Bu paketi kullanarak yeni bir mağaza oluşturmak için, yalnızca RegisterStore işlevini aşağıdaki bağımsız değişkenle kullanmanız gerekir: mağazanızı benzersiz bir şekilde tanımlayan isimler
Mağazadan veri almak için tüm alıcılarla seçiciler nesneler
Güncellemeler için talepleri tetikleyen işlevlerle eylem nesneleri (bunun daha sonra bu yazıda ne anlama geldiğini tartışacağız)
Belirli eylemler tetiklendiğinde durumu yenilemekten sorumlu redüktör işlevi
Somut bir örnek görelim, ha? Geçen hafta örneğe devam ederek, SRC’de yeni bir klasör mağazası oluşturun. Ardından aşağıdaki kodla index.js dosyasını oluşturun:
// ‘@wordpress/data’ dan {registerStore} ithalatlarını yükleme; ‘./Reducer’ ‘dan azaltıcı içe aktarma; İthalat * ‘dan eylemler olarak. ‘./sectors’ dan seçici olarak * ithal *; Kayıt (‘React-explo/sayaçlar’, {eylemler, redüktör, seçiciler,}); Görüntüler oldukça kolay, değil mi? Bahsettiğimiz RegisterTore işlevini ve henüz yapmadığımız bazı bağımlılıkları (Reduter, Eylemler ve Seçiciler) aktarıyoruz ve yeni mağazalar kaydediyoruz. Benzersiz olduğundan emin olmak için dükkanımızı nasıl adlandırdığımızı unutmayın: Eklentimizin adını (React-örnek) mağazayı tanımlayan bir kelimeyle (sayaç) birleştirdik. Çok kolay!
Mağazadaki eylemler (prensip olarak) her mağaza için gerekli olan bir şey, durumunu değiştirmemize izin veren bir dizi işlevdir. Örneğimizde, eylem SRC/Store/Actions.js: dışa aktarma işlevi AddCounter (Counterid) {return {type: ‘add_counter’, Counterid,}; } Dışa aktarma işlevi removecounter (Counterid) {return {type: ‘remove_counter’, CounterId,}; } dışa aktarma işlevi setCounterValue (CounterID, değer) {return {type: ‘set_counter_value’, CounterID, değer,}; } Beklendiği gibi, mağazamızın durumunu güncellemek için üç eylemi vardır: AddCounter: Mağazamıza yeni bir sayaç ekleyen işlev. Gerekli tek argüman yeni bir sayım kimliğidir.
RemoveCounter: Mevcut sayaçı silen işlev. Bir kez daha, gereken tek argüman silmek istediğimiz hesap makinesi kimliğidir.
SetCountValue: Verilen hesaplama için yeni bir değer ayarlayan işlev. Açıkçası, bu işlev iki argüman gerektirir: yenileme ve yeni değer için kimlik sayaçları.
Şimdi, her eyleme daha yakından bakarsanız, şaşırabilirsiniz: Bu eylemlerin hiçbiri bir şey yenilemiyor gibi görünmüyor. Bunun yerine, nesneyi döndürürler. Burada neler oluyor?
Redux’ta (ve WordPress mağazaları Redux’a dayanır), eylem mağazayı doğrudan değiştirmez. Bunun yerine, “güncelleme taleplerini” belirten nesneler üretirler. Bu istek her zaman aynı örüntüyü izler: bunlar, istenen güncellemeleri başarılı bir şekilde uygulamak için gerektiği kadar ek istekleri ve özelliği belirleyen tür özelliklerine sahip nesnelerdir. Şimdi birisinin durumu gerçekten nasıl güncelleyebileceğine bakalım … mağaza durumunu yenilemek için bir damper uygulamak, mağazanın eylemi yalnızca güncelleme taleplerini temsil ediyorsa, isteği olduğunda mağazamızın durumunu gerçekten güncellemek için birine veya bir şeye ihtiyacımız var gönderilmiş. Bu bir damper kullanımıdır. Sounder, mevcut başvuru durumumuzu ve birisinin gönderdiği eylemleri, istenen güncellemeleri uygulayarak durumu gönderen ve güncelleyen bir işlevdir. Önceki bölümde mağazamızın üç eylemi olduğunu gördük, bu nedenle damper bu eylemlerin her birini uygulayabilmelidir: {omit} ‘dan’ lodash ‘i ithal ettirir; Dışa aktarma varsayılan işlev redüktör (durum = {}, action) {switch (action.type) {case ‘add_counter’: return {… durum, [action.counterid]: 0,}; durum ‘remove_counter’: return omit (durum, action.counter); Case ‘set_counter_value’: return {… durum, [action.counterid]: action.value,}; } dönüş durumu; } Gördüğünüz gibi, damper önceki durumu alır (varsayılan olarak boş bir nesne {}) ve durumu güncellemek için bilgilerle gönderilen eylemdir. Vücut damperi oldukça basit:
Bu, çalıştırmamız gereken güncelleme türünü (Action.type) ayırt etmek için bir anahtar ifadesi ile başlar: Add_counter ise, 0’a hesaplama değeri olan yeni bir anahtarla yeni bir durum nesnesi üretir.
Remove_counter ise, Action.counterid olmadan yeni bir durum nesnesi üretir.
Set_counter_value ise, eylemdeki değerin şimdi Action.Value olarak ayarlandığı yeni bir durum nesnesi üretir.
Buradaki en önemli şey, damperin saf bir işlev olduğunu (ve olması gereken) fark etmektir. Bu, mevcut durumda yaptığımız her modifikasyonun yeni durumların inşasını içerdiği anlamına gelir. Bu nedenle, her durumda, önceki durumu değiştirmemelisiniz. Mağazanızın durumunu nasıl güncelleyeceğinizi bildikten sonra mağazada seçici, öğrenmeniz gereken şey nasıl soracağınızdır. Sadece seçicileri belirleyin. } dışa aktarma işlevi GetCountValue (durum, Counterid) {return durumu [Counterid]; } Ve hepsi bu! Yeterince net, değil mi? Mağaza sektörü (en azından) bir argüman (eyalet mağazası) alan ve belirli bir değeri geri yükleyen bir işlevdir. Açıkçası, mağazanızdan belirli bir değer döndürmeniz gerekiyorsa, seçim daha fazla argümana sahip olabilir. Bizim durumumuzda, örneğin, iki seçim yaptık:
Belcounterids, Monkers’ın tanımlanması dizisini geri yükler. Mağazayı bir sözlük/nesne kullanarak uyguladığımız için, yalnızca nesneyi iade etmekle ilgileniyoruz.
GetCountValue, verilen sayaçların belirli değerini geri yükler. Bu işlev iki argüman alır (mevcut uygulamamızın durumu ve ilgilendiğimiz kimlik kartı) ve istenen değeri geri yükleyin. Mağazanın düzgün çalışıp çalışmadığını test etmek için mağazamızı nasıl test edersiniz, src/index.js dosyasını açın ve içe aktarma: // İçe Aktarma Bağımlılıkları ‘@WordPress/Element’ ‘den {rending} ithalat {rending}; İthal ‘./store’; {Counter} ‘dan {Counter}’. … Sonra, kod kodunu (NPM Run oluşturma kullanarak) aktarın ve tarayıcınızı açın. Geliştirici aracını açın ve bazı komutları yazmak için bir JavaScript konsolu kullanın: dispatch = wp.data.dispatch (‘React-explo/sayaçlar’); Select = wp.data.sellect (‘React-exmple/sayaçlar’); dispatch.addcounter (‘A’); dispatch.addcounter (‘B’); dispatch.addcounter (‘C’); dispatch.setCountValue (‘A’, 3); Select.getCounterIds (); // Array (3) [“A”, “B”, “C”] Select.getCounterValue (‘A’); // 3 Dispatch ve WordPress işlevlerini seçerek, mağazanın beklendiği gibi çalıştığını görebileceksiniz. Ve ipucu bonusu: Firefox ve Chrome için Redux Devtools adlı bir uzantı var, bu da Redux mağazasını doğru görmenizi sağlayan:
Firefox ve Chrome için Redux Devtools uzantısı, Redux mağaza durumunu kolayca kontrol etmenizi sağlar.
