React’e Giriş, Bölüm 4

Redux tabanlı React ve WordPress mağaza bileşenleri ile birkaç sayım uygulanır.
Son yazıyı bitirdiğimizde, başvuru durumumuzu izlemek için olağanüstü bir mağazamız vardı. Bu, nihayet UI oluşturmak için ihtiyacımız olan tüm temellere sahip olduğumuz anlamına gelir. Bugün, React bileşeninin Redux tabanlı WordPress mağazamızla nasıl bağlanacağını göreceğiz, böylece arabirim mağazalarda ve kullanıcı etkileşimlerinde durumunu güncellememiz durumunu güncelleyecek. Geçen hafta ödev için çözüm ama bunu yapmadan önce, geçen hafta sizin için bıraktığım ödevleri hızlı bir şekilde gözden geçirelim. Temel olarak, artık bir sözlük kullanmamayı, ancak nesne dizisini kullanmanız için mağazayı yeniden yerleştirmenizi istiyorum:
Const originalStore = {x: 1, y: 2,}; const newstore = [{id: ‘x’, değer: 1}, {Id: ‘y’, değer: 2},]; Bu güncellemeyi mağazanıza uygulamak için ne gibi değişiklikler yapıyorsunuz? Pekala, her şeyi hızlı bir şekilde gözden geçirelim! Depolamanın eylemi zaten sahip olduğumuzla aynıdır, bu yüzden umarım burada hiçbir şey değiştirmezsiniz, çünkü bu gerekli değildir. Geçen hafta gördüğünüz gibi, eylem mağazayı doğrudan güncellemedi (veya erişmedi) ve bu nedenle mağazamızın altında yatan yapıdaki her değişiklik burada etkilemeyecek. Ve tam olarak aksiyonlarımızda hala sahip olduğumuz şey budur. 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,}; } Singling Sounder, önceki duruma ve gönderilen işlemlere göre durumun yenilenmesinden sorumlu bir işlevdir. Bu durumda, uygulama durumumuzu depolayan veri yapısını değiştirmek istediğimiz için, damperleri yeniden yerleştirmemiz gerekiyor:
{Harita, bul, olmadan} ‘lodash’tan {harita, bulma}; Dışa aktarma varsayılan işlev redüktör (durum = [], action) {switch (action.type) {case ‘add_counter’: return [… durum, {id: action.counterid, değer: 0},]; Case ‘remove_counter’: Durum (durum, find (durum, {id: action.counterid}) olmadan döndür; Case ‘set_counter_value’: dönüş haritası (durum, (sayaç) => action.id === action.counterid? {Counter, değer: action.value}: sayaç); } dönüş durumu; } Tahmin edebileceğiniz gibi, burada yapmamız gereken, boş nesnenin {} durumunun varsayılan değerini boş bir diziye [] değiştirmektir. Ardından, yeni bir mağazayı doğru bir şekilde güncelleme eylemi için her bir vakayı sadece anahtar bloğumuzda ayarlamamız gerekir. Temel olarak, bu, diziye nesneyi eklemek, silmek veya güncellemek içindir. Sonunda seçicilerimiz.js dosyamız var. Geçen hafta gördüğümüz gibi, seçmenler mevcut başvurumuzun statüsünü ve ihtiyaç duyabileceğimiz diğer parametreleri aldılar ve talep edilen değeri bu durumdan altılar. Kaydetilecek durum yöntemini değiştirdiğimiz için, seçmenlerimizi de değiştirmemiz gerekiyor: {harita, bul} ‘dan {harita, bul}; Dışa aktarma işlevi getCounterids (durum) {return map (durum, ‘id’); } Dışa aktarma işlevi GetCounterValue (durum, CounterID) {const Countain = find (durum, {id: CounterID}) || {}; geri dönüş. Değer; } Bir kez daha, bu büyük bir sorun değil … ama umarım haklısın
Örneğimizde, yalnızca iki seçimin var, bu yüzden yalnızca iki işlevi yeniden yerleştirmemiz gerekiyor. Birincisi, harita ile çok kolay ulaşabileceğimiz tüm sayımlarımızın tanımlanmasını geri yüklemekten sorumludur. İkincisi, belirtilen hesaplama değerini geri yükler (veya verilen sayaçlar mağazamızda bulunamazsa tanımsız), bu nedenle tek yapmanız gereken kimlik sayısını arayın, Lodash, Bul ve Döndürme Değer Yardımcısı Asistan Yardımcı işlevini kullanan bir karşıittir. . Son bir not, sizden mağazanızı değiştirmenizi istememin nedeni, aşağıdaki dersleri öğrenebilmenizdir: Bunun gibi bir mağaza kullanmanın ana avantajı, kara kutu gibi davranmalarıdır – düzenlemenin dahili olarak olma şeklini tamamen değiştirebilirsiniz. Ve hepsi beklendiği gibi çalışacak, arayüz (yani eylemler ve seçmenler) değişmeden.
Bugün oluşturmak istediğimiz uygulama.
ve her sayaçla birbirleriyle bağımsız olarak yönetin. Bölüm 2’de uyguladığımız kullanıcı arayüzünde sahip olduğumuz şeylere ne gibi değişiklikler yapmamız gerekiyor? Eh, (1) her sayıyı sil düğmesini içerecek şekilde değiştirmek ve (2) yeni bir sayım eklemek için yeni bir düğme olacak şekilde uygulamayı değiştirmek için açıkça gereklidir. Öyleyse bunu yapalım! İlk olarak, SRC/Components/Counter.js dosyasını açın ve yeni Sil düğmesini ve yeni Ondelete PROP’larını ekleyin, böylece kullanıcı düğmeyi tıkladığında sayım silinir:
const tezgahları = ({değer, çevrimiçi, ondeRease, ondelete}) => (
sayacı: {value}
+ – sil ); Varsayılan sayacı dışa aktarın; Ardından, (a) kullanıcı tarafından eklenen tüm danışmanları ve (b) yeni bir tane eklemek için düğmeleri oluşturmadan sorumlu yeni bir bileşen oluşturun. SRC/Components/Counter-List.js dosyalarını aşağıdaki gibi oluşturmanızı öneririm: ‘/Counter”dan sayacı içe aktarma; const Counterlist = ({addCounter, CounterIds}) => (
{Counterids.map (Id) => ()}> Sayaç ekle )
); Varsayılan karşı listeyi dışa aktarın; Bu yeni bileşenin belirtilmesi gereken birkaç ilginç şey var:

Bu, diğer bileşenleri (sayaç) kullanan bir bileşendir (karşı liste). Bu örneği öğreticimizde görmedik, yani … şimdi var! Hatırlamanız gereken tek şey, kullanmak istediğiniz tüm bileşenleri içe aktarmanız gerektiğidir.
İthalat ifademizde kıvırcık bir braket yoktur (ithalat karşı ithalat {Counter}), ancak şu ana kadar kullandığımız tüm ithalatlar buna sahiptir. Bunun nedeni, sayaçların şu anda varsayılan ihracat olması ve varsayılan ihracat kıvırcık parantezlerle içe aktarılmamasıdır.
Karşı liste bileşeni iki özellik alır: AddCounter, yeni eklememizi sağlayan bir eylemdir ve karşı uçlar, uygulamamızın sahip olduğu tüm sayıları tanımlayarak bir çizgidir.
Her sayıya atıfta bulunmak için, kimlik dizisini hesaplama örneğine eşleştiriyoruz. Bu haritada, sayaç bileşeninin iki yeni özelliği vardır: Key ve Counterid.Anahtar, oluşturma makinesini optimize etmek için React’in ihtiyaç duyduğu bir Propertiet’tir.Counterid, daha sonra tartışılacak bir şeydir.
Sayaç bileşeni, umduğu herhangi bir mülkü içermez.Çünkü bir dükkan kullanarak dolduracağız (ve yeni bir sayaç bize yardımcı olacaktır).
Bir sayaç gibi, karşı liste bir dışa aktarma varsayılandır.
Ana Dosya Uygulamamız artık tek bir sayı görüntülediği için, ancak bir sayım listesi, yeni yaptığımız yeni bileşenleri oluşturmak için dizin.js değiştirmemiz gerekiyor: karşı liste.Ayrıca, tek sayı durumumuzu yönetmek için Bölüm 2’de yazdığımız tüm kodları da silebiliriz, çünkü şimdi doğru WordPress mağazasına sahibiz.
Tüm bunları göz önünde bulundurun, dizin.js: // ithalat bağımlılıkları {rending} ‘dan’ wordpress/element ‘i; İthal ‘./store’; ‘./Components/counter-list’ den alakalı liste; // DOM const wrapper = document.getElementById (‘React-exple-WRAPER’) oluşturma bileşeni; Render (, sargı); Gördüğünüz gibi, sadece mağazamızı ve karşı liste bileşenini içe aktarırız ve DOM düğümünde sonuncusunu ( @wordPress/Element paketinin oluşturma işlevini kullanarak) oluştururuz. Ne yazık ki, kimse beklendiği gibi işlev görmez (değil), ancak bunun nedeni bileşenlerimizi mağazaya bağlamamış olmamızdır. React bileşenini Cold Redux mağazasına nasıl bağlar! İhtiyacımız olan her şey hazır ve hedefimizden sadece bir adım uzaktayız. Bir yandan, uygulamamızın durumu ve güncellemek için eylemler hakkında soru sormayı seçerek bir mağazamız var. Öte yandan, bu durumu kullanıcı arayüzünde görselleştirmek için gereken bileşenlerimiz var. Tek eksik olan şey, iki parçayı birbirine yapıştırmaktır … Karşı listeye karşı listeye bağlanmak, iki özellik gerektiren basit bir bileşendir. Bir yandan, uygulamamızda etkinleştirdiğimiz tüm bileşenleri belirleyerek bir liste bekliyor: Counterids. Öte yandan, yeni bir sayım eklemek için bir geri çağrı bekliyor: AddCounter. Bölüm 3 öğreticilerindeki mağazamızda tanımladığımız seçmenleri ve eylemleri görürseniz, seçmenlere ve bu tür eylemlere sahip olduğumuzu göreceksiniz. Dükkanın bir Gentor seçmeni var, geri dönüyor ”
Sahip olduğumuz tüm bileşenleri belirleyerek kaydolun. @WordPress/Data, mağazalar kaydetmek için kullandık, mevcut bileşenleri mağazalardan türetilmiş özelliklerle genişletmek için birkaç yüksek seviyeli bileşen sunuyoruz: WithSelect ve WithDispatch. Bu bileşenleri, mağazada belirtilen değeri kullandığımız sahne ile ekleyebilir. Buna bir örnekle bakalım: {wordpress/data ” dan {withSelect, withDispatch}; {uuid ‘den {v4 {v4 {v4; ‘./Counter’; const Counterlist = ({addCounter, CounterIds}) => (
{Counterids.map ((Id) => ())}

Sayaç ekle ); Const withCounterIds = withSelect ((seç) => {const {getCounterIds} = seç (‘react-example/sayaç’); return {Counterids: Gentcounterids (),};}; const withcounterarAdder = withDispatch ((dispatch) => {const {const {constCounter} = dispatch (‘reakt-exchange/sayaç’); return {addCounter: () => addCounter (uuid ()),};};};}; };};}; Varsayılan With WithCounterRadder (WithCounterIds (CounterList)); Burada olan birçok şey olduğunu biliyorum, bu yüzden adım adım yapalım:
Genişletilmiş karşı liste versiyonunda yaptığımız ilk şey, ihtiyacımız olan yeni bağımlılıklar. Özellikle, WITHSECT ve WithDispatch’ı ithal ediyoruz. Sonra garip ithalatımız var: UUID. Bu, benzersiz bir rastgele kimlik üreten bir pakettir ve neden yakında ihtiyacımız olduğunu göreceksiniz. Bileşenin kendisi (karşı liste) değişmez. Hala UI yapmak için gereken iki sahne alacağını varsayar: yeni sayımlar eklemek için hesaplama kimlikleri ve eylemlerin listesi.
Ardından, WithSelect’i kullanıyoruz. WithSelect yüksek seviyeli bir bileşendir, ancak “diğer işlevleri geri yükleyen işlevi” düşünebilirsiniz. Ortaya çıkan işlev, mevcut bileşenlerin yeteneğine katkıda bulunacak bir şeydir (okumaya devam edin ve her şey hemen mantıklı olacaktır).
WithSelect’i kullanmak için, önce ona bir parametre olarak bir işlev demelisiniz. Bizim durumumuzda anonim işlevler yaptık.
Anonim işlevi, mağazanızda kayıtlı tüm seçmenlere erişmenizi sağlayan bir argüman, seçin.
Bu anonim işlevde yaptığımız ilk şey, Belcounterids seçmenini React-örnek/sayaç mağazamızdan almaktır.

Bu anonim işlevin sonuçları, karşı liste bileşenlerimize eklemek istediğimiz sahne. Bu durumda, bu yalnızca değeri GetCounterids tarafından alınan karşı yönlerin tanımlanmasının bir listesidir.
Sonuçları Select ile kaydediyoruz (unutmayın, bu sonuç yüksek seviye bir bileşen veya isterseniz yeni bir işlevdir) WithCounterids adlı bir değişkende. Artık bu yüksek seviyeli bileşen/işlevi sevdiğimiz bileşenlere aşağıdaki gibi uygulayabiliriz: WithCounterids (MyComponent). Bunu yapmanın sonucu, MyComponent’in artık React-örnek/sayaç deposundan alınan değerle doğru ayarlanmış bir Counterids özelliğine sahip olmasıdır. Ardından, Dispatch ile üst düzey bir bileşen/işlev kullanıyoruz. Operasyon, WithSelect ile tamamen aynıdır, ancak bize mağaza seçmenlerine erişim sağlamak yerine, bu bize eylemlerine erişim sağlar.
WithDispatch, Withellect gibi, işlevleri bir parametre olarak bekler.
İlk parametreye artık Dispatch deniyor. Store eyleme erişmek için kullanıyoruz.
Dispatch kullanarak, React-örnek/sayaç mağazamızdan bir AddCounter eylemi aldık.
Beklenen AddCcounter işlevi, bağımsız değişkensiz bir işlevdir. Bununla birlikte, mağazamızdaki AddCounter eylemi bir argüman gerektirir: yeni sayılara sahip olması gereken benzersiz kimlik. Bu uyumsuzluğun üstesinden gelmek için, yapmamız gereken, yürütmesi mağazadaki gerçek eylemi çağıracak olan karşı liste bileşenlerimizin (bağımsız değişkensiz işlevimiz) ile karşılaşan anonim işlevi geri yüklemektir. Mağazadaki eylem benzersiz bir kimlik gerektirdiğinden, Prop AddCounter olarak adlandırdığımızda benzersiz bir kimlik üretmek için bir UUID paketi kullanırız.
WithCounterRadder, bu WithDispatch ve WithCounterids ile analog sonucudur.Bu yüksek seviyeli bileşeni mevcut bileşenlere uygulamak, mevcut bileşenlere propr addCounter’ı sağlayacaktır. ) ve daha sonra (propr addCounter alacak şekilde) ile uygularız.
Ve hepsi bu! Şimdi ilk bileşeninizi mağazaya bağlamayı başardınız, yani artık kullanıcı arayüzünüze bir sayım ekleyebilirsiniz (ve görebilirsiniz). Her bir sayaçı mağazaya bağlayarak, mağazadan gereken sahne alabilmemiz için sayaç bileşenlerimizi değiştirelim. Tahmin edebileceğiniz gibi, yapmamız gereken tek şey az önce yaptığımız süreci tekrarlamaktır: Tezgahta üretilen yüksek seviyeli bileşenleri zorla ve withippatch aracılığıyla reaksiyon değiştirme/sayaçlardan bazı seçmenleri ve eylemleri kullanın. Son kaynak koduna bakarak başlayalım: ‘@wordpress/compose’ dan {kompozer} ihalatı; ‘@Wordpress/data’ dan {withSelect, withDispatch}; const tezgahları = ({değer, ondelete, çevrimiçi, onDecrease}) => (
sayacı: {değer} düğme> ->->-

sil ); const withValue = withSelect ((seç, {sayaçlar}) => {const {getCountValue} = SELECT (‘react-explo/sayaç’); return {değer: gentcounteval (sayaç),};}; const tartışma = withDispatch ((dispatch, {Counterid, değer}) => {const {setcounterValue, removeCounter,} = dispatch (‘react-exchange/sayaçlar’); dönüş {çevrimiçi 1), ondecrease: () => setcounvalue ( Counterid, değer – 1), ondelete: () => removeCounter (CounterID),};}); Dışa aktarma varsayılan oluşturma (değer, tartışma) (sayaç);
Her şeyden önce, ihtiyacımız olan bağımlılığı ithal ediyoruz. Bileşenin kendisi, karşı, aynı zamanda değişmez. Hala dört sahne bekliyor: artık mağazadan alınacağını bildiğimiz değer, çevrimiçi, onincrease ve onDecrease.
İlk olarak, mağazamızdan danışmanları almak için Select’i kullanın.
Mağaza birçok danışmanın değerini korur, bu yüzden istediğimiz tam sayaçları anlatmalıyız. Neyse ki, karşı liste her bir bileşene karşı çıktığında, her sayacı bir sayaçla yapıyoruz, hatırlıyor musunuz? Mağazamıza, ilgilendiğimiz tam değer için böyle söylüyoruz …
Bu anonim işlevin gövdesi, bir karşı liste ile gördüğümüz örneğe çok benzer. GetCounterValue seçmenlerini mağazamızdan alıyoruz ve Prop Counterid’i kullanarak doğru değeri iade ediyoruz. Anonim işlevin artık ikinci bir argümanı olduğunu unutmayın: bileşen sahne listesi.
Ardından, sayacımızın ihtiyaç duyduğu eylemleri doldurmak için WithDispatch’ı kullanıyoruz.
Mağazamızda, SetCountValue ve RemoveCounter’ın eylemlerine sahip olduğumuzu biliyoruz.
Her iki eylem de, daha az gördüğümüz gibi, WithDispatch’da tanımladığımız anonim işlevin ikinci argümanında mevcut olan yenilemek veya silmek için danışmanların tanımlanmasını gerektirir.
SetCountValue ayrıca ayarlamak istediğimiz yeni değeri de bilmelidir. Karşı bileşenlerimizin çalışması gerektiğinden (bir tane yükseltmek için ve geçerli değeri azaltmak için bir tane daha), bir tane ekleyebilmemiz (veya azaltabilmemiz) için geçerli değeri de bilmemiz gerekir. Neyse ki, mevcut sayım değerini WithSelect’i kullanarak aldık, yani bir değer adı verilen bir sahne var. Geçerli sayaç değerine 1 ekler; OnDecrease, aynı şeyi yapan ancak 1’i azaltan başka bir anonim işlevdir; Ve Ondelete, mağazadan RemoveCounter kullanan bir işlevdir.
Son olarak, karşı bileşenlerimize yeni yaptığımız (değer ve withoctions ile) yüksek seviyeli bileşenleri uyguluyoruz. Bu sefer @wordpress/compose tarafından sağlanan kompo yardımcı işlevini kullandım, ancak lütfen bunun bir karşı liste ile daha önce yaptığımızla aynı olduğuna dikkat edin.