Neden Redux gibi devlet yönetimi sorununuzu çözebilir?

Son zamanlarda bir süredir WordPress, PHP ve JavaScript’i geliştirdiğimi söyledi. Son 5-6 yılda, artık en iyi olmayan en iyi uygulamalardan bazılarını öğrendim. Örneğin, Durum Yönetimi – Uygulama Uygulamanızın tüm dinamik değerlerini formlara yerleştirerek, formlara, şimdi sayfaları gönderme vb. – Tek bir yerde, yaygın değil. Şimdi, tüm koşullarım olmadan hayatı tek bir yerde hayal edemiyorum. JavaScript yazmaya başladığımda, alan alanının değerini bilmem veya güncellemem gerekirse, Val () JQuery yöntemini kullanıyorum. Her değiştiğinde bir şey yapmam gerekirse, değişiklik () jQuery yöntemiyle değişikliklere abone olacağım. Tabii ki Val () değişiklikleri tetiklemiyor, bu yüzden bunun için jQuery.tigger () kullanmayı hatırlamalıyım.
Bu, öğrenmek ve kararsız ve anti-performans anti-performans haline gelen basit bir şeyle başlayan bir örüntü örneğidir. Redux gibi yönetim çözümlerini kullanmayı öğrenmek, zaman gerektiren ekstra bir komplikasyondur. Durum yönetimi, doğru kullanıldığında, uygulama yapısında uygulamanın geliştirilmesini ve testini kolaylaştıran ek bir komplikasyon türüdür. Teknoloji hızlı hareket ediyor ve şimdi en iyi uygulama devlet yönetimi. Durum yönetimi, React uygulamaları için çok popüler olan Redux gibi araçları kullanarak, uygulama durumu için bir gerçek kaynağı oluşturur. Bu, PHP bağlamında tartıştığım bir konteyner kullanmak gibidir.
Bu makalede, Redux gibi durum yönetimi araçları tarafından hangi sorunların çözüldüğünü tartışacağım. Bir sonraki yazımda, React uygulaması ile Gutenberg Block arasındaki bileşenleri paylaşmak. Yazının önemli kısmı Redux WordPress soyutlamasının kullanımını içerir. Nedeni ile başlayalım. Devlet uygulaması için tek sorumluluk Daha önce yazdığım tek sorumluluk ilkesi, kodumuza basitlik uygulayarak, çünkü her işlev sadece bir şey yapabilir. Tek Sorumluluk İlkesi (SRP), her yazılım modülünün değiştirmek için bir ve tek bir nedeni olması gerektiğini belirtir. Bob, devlet yönetiminin tek sorumluluğu durumu yönetmektir. React uygulamasında, durumu sahne olarak sağlanan “aptal” bir bileşene sahip olabiliriz. Durum, testlerde yuva, redux, yapay veriler, her neyse ana bileşenden gelebilir. Bunlar saf bir işlevdir – giriş alan ve yan etkiler olmadan çıktı yapan bir işlevdir ve bu nedenle durumun yönetiminden ayrılır. Veri sunumu değişirse, değişiklik React bileşeninde meydana gelir. Veri güncellemelerini işleme şeklimizin gerçekleşmesi durumunda, değişiklikler durum yönetiminde meydana gelir.
Ülke için Redux, Vuex veya Flux ya da ne kullanırsanız kullanın, çünkü devletin gerçekten hayatta olduğu tek yer bu. Diğer her şey durumu gözlemlemektir. Bu bölümdeki bazı temel kavramlar, Gutenberg tarafından kullanılan Redux ile bazı temel durum yönetimini tartışacağım. Bu kavramları tartışmak, Redux’u somut bir örnek olarak kullanmak, WordPress’in geliştirilmesi için yararlıdır ve tepki vermek ve sadece soyut kavramlar hakkında yazmamı engeller. Bu kavramın Vuex’te nasıl uygulandığını not edeceğim, böylece bunun React + Redux dışında uygulanan bir model olduğunu görebilirsiniz. UI Modülü Durumu Caldera İşlemci Formları. Netlik için basitleştirilirler. Tam ve daha pratik bir örnek için Github’daki kodu görmenizi öneririm. Haritalar yerine nesneleri kullanmak için bir örnek refaktörü yapıyorum. Nesnelerle başlamayı şiddetle tavsiye ettiğim için not edilmelidir, ancak yönetilmesi daha kolay olabilecek diğer veri türlerini düşünün. Redux Azaltma, Durum damper fonksiyonu tarafından yönetilir. Fonksiyonel programlama azaltmasında, örneğin, JavaScript’teki Array.Reduce (), bir giriş koleksiyonunu alın ve tek bir değere indirin. Tek çıkış değeri herhangi bir tür olabilir. Girişi hesaplayabilir ve toplamı bir tamsayı olarak döndürebilirsiniz.
Redux Damper geçerli durumu alır ve yeni durumu geri yükler. Çünkü React yalnızca verilen nesne değiştiyse – mutasyona uğramışsa değil – yeniden işleyecektir – neredeyse her zaman redüktörümüzde yeni bir nesneyi geri yüklemek istiyoruz. Genel olarak, bir veri toplama için bir damper kullanırız ve azaltma için belirli eylemleri belirleriz. Redux’ta bu eylem diyoruz, Vuex’te buna mutasyon diyoruz. Mutasyon zihnimde daha iyi bir terimdir çünkü mutasyona uğramışlardır, ancak bu eylemi Redux’a gönderdiğimizde, onu doğru dampere eşleştiren ve orta değişimleri uygulayan iyi bir metafordur. Redux dispherder işlevi genellikle nesneleri ikinci argüman olarak alır, Bu eylemlerdir ve eylem türünde bir anahtar kontrol yapısı kullanır. Örnek olarak:
Durumu geri yüklerken yayılma operatörünü kullandığımı unutmayın. Amacım eyaletteki dizi deposuna eklemek. Diziyi değiştirmek ve ardından durumu geri yüklemek için State.processors.push () kullanabilirim. Nesne istediğim gibi güncellenecek, ancak sonuç olarak React güncellenmeyecek. Neden? Niye? Dizi dizisi (bir nesne türü) yeni bir nesne oluşturmadığından, reaksiyon referansı olan nesneyi günceller. Yeni nesnelerle reaksiyon sağlamalıyız.
Bu, INGUTURE.JS tarafından çözülen bir sorundur.Redux ile başladığınızda, React doğru bir şekilde güncellenmediği için her üzgün hissettiğinizde, yeni bir tane yapmak yerine nesneyi değiştirdiğinizi düşünürsünüz.Büyük olasılıkla sorun budur.Ayrıca, Imkutable.js girişini okuyun, ancak gerçekten kullanmayın.INTUTBURE.JS daha sonra kullanabilirsiniz, ancak öğrenmeye çalışabilirsiniz ve redux ve aynı anda tepki verebilir ve ekstra karmaşıklık seviyesine ihtiyaç duymayabilirsiniz.Eylemler Bu süper basit damperi görürseniz, eylemin belirli bir “form” olacağını varsayabiliriz.Bu eylemi her gönderdiğimizde yapılması gereken nesnenin yapısı budur.Nesnenin şeklini tüm uygulamalarda tutarlı tutmak için, eylem üreticisinin işlevini ekleriz. Bu işlevler aynı zamanda saf bir işlevdir ve eylem biçimini belirleme sorumluluğuna sahiptir.

Eylem fonksiyonu dampere sıkıca birleştirilir. Bunu söylüyorum çünkü şeklini değiştirmem gerekiyorsa, damper ve eylemin değiştirilmesi gerekiyor. Buna katılıyorum çünkü işlev görüyor, bu bir standart ve eylem modelinin ve damper (ve seçmenlerin) bir eyaletteki belirli veri noktalarını yönetme sorumluluğuna sahip olduğunu söyleyebiliriz. Ve bunu seviyorum çünkü bu, değişimin yapılması gerektiğinde birlikte yeniden hareket eden tekrarlayan bir model. Seçmen eylemi, statü değiştirme azaltımını anlatıyor. İnanılmaz, ancak verileri durumdan ve API testimize veya isteğimize kaldırmanın bir yoluna da ihtiyacımız var. Seçim buraya giriyor. Seçim, devletin doğru biçiminde doğru verileri almaktan sorumludur. Redux sektörüne eşdeğer olan Vuex’te Getter. Bu ismi seviyorum, Getter veya Redux seçmenleri veri alan bir işlevdir. Örneğin, durum nesnenizde bir dizi yayın varsa, kimliğe dayalı bir yayın bulmak için bir seçmen işlevi ekleyebilirsiniz:
Caldera Forms UI Kütüphanesi örneğine geri dönersek, durumdan kimliğe dayalı bir işlemci almak için seçmenler:
Uygulamalara seçmen eklemek, bir sonraki gönderide tartışacağım WordPress veri yeniden seçme veya modül gibi bir kütüphane gerektirir. Şimdiye kadar gösterdiğim her şeyin tamamlanması saf işlevler kullandı. Bu işlevler senkronize olmalıdır. Redux’ta, asenkron eylemler için orta paralar kullanılır. Bu muhtemelen deneyimime göre Redux ayarlarının en karmaşık kısmı. Bulduğum en basit çözüm WordPress veri modülü idi. WordPress veri depolama alanında “çözümleyici” eklenebilir. Bu çözümleyicinin işlevi eşzamansız olabilir ve aynı adı taşıyan seçmenler ilk kez çağrıldığında çağrılabilir ve argüman verilir. Örneğin, bir seçmenimiz ve GetPost adlı bir çözümümüz varsa, gönderme dizisini izleyen mağazalar için, ilk kez, GetPost seçmenleri çağrılır, WordPress Rest API talebi yapılacaktır ve sonuçlarda belirtilen sonuçlar. Bu yazının bir sonraki kısmı yalnızca durumdaki değerleri kullanacaktır. Bu, veri için yavaş yüklemenin iyi ve basit bir uygulamasıdır. Sayfaya göre soran seçmenler ve çözümleriniz varsa, parşömenler sınırsızdır ve daha fazla arayüz türü kolayca yönetilir. İşte Gutenberg Caldera Formları Bloğu’ndan alıntı yapılan pratik bir örnek: