Mobx React - En İyi Uygulamalar

Bu yazıda size mobx ile React kullanmak için ortak en iyi uygulamaları göstermek istiyorum. Onları kural olarak sunacağım. Bu yüzden ne zaman belirli bir soruna gelseniz, bu kurallara sadık kalırken çözmeye çalışın.

Bu makale, mobx'teki mağazalarla ilgili temel bir anlayışa sahip olmanızı gerektirir. Değilse, önce bunu okuyun.

Bir hızlı başlatmaya mı ihtiyacınız var? Önerilen uygulamaları uygulayan bir başlangıç ​​projesi oluşturdum. https://github.com/danielbischoff/react-mobx-starter

Mağazalar ui durumunu temsil eder

Mağazaların uygulamanızın kullanıcı arabirimi durumunu temsil ettiğini unutmayın. Bu, mağazalarınızın durumunu bir dosyaya kaydettiğinizde, programınızı kapatıp yüklü durumla yeniden başlattığınızda, aynı programa sahip olacaksınız ve programınızı kapatmadan önce gördüğünüz gibi aynı şeyleri göreceksiniz. Mağazaların “yerel veritabanları” olması amaçlanmamıştır. Ayrıca, hangi düğmenin görülebilir, devre dışı bırakıldığı, girilen girişin o andaki metni, vb. Bilgileri de tutar.

Dinlenme aramalarınızı mağazalardan ayırın

Dinlenme arayüzünüzü mağazalarınızın içinden aramayın. Bu onların test edilmesini zorlaştırır. Bunun yerine bu dinlenme çağrılarını fazladan sınıflara koyun ve bu örnekleri mağazanın yapıcısını kullanarak her mağazaya iletin. Test yazdığınızda, bu api çağrılarını kolayca sahte yapabilir ve sahte api örneğinizi her mağazaya iletebilirsiniz.

İş mantığınızı mağazalarda saklayın

Bileşenlerinize asla iş mantığı yazma. İş mantığınızı bileşenlere yazdığınızda, yeniden kullanma şansınız olmaz, iş mantığınız birçok bileşene yayılır, bu da kodu yeniden düzenlemeyi zorlaştırır veya yeniden kullanır. İş mantığını mağazalardaki yöntemlerle yazın ve bu yöntemleri bileşeninizden çağırın.

Global mağaza örnekleri oluşturmayın

Hiçbir zaman global mağaza örnekleri oluşturmayın. Bileşenleriniz için makul ve güvenilir testler yazamazsınız. Bunun yerine, mağazalarınızı bileşen parçalarınıza enjekte etmek için Sağlayıcı'yı kullanın. Daha sonra testlerinizde bu mağazalarla kolayca alay edebilirsiniz.

Yalnızca mağazanın özelliklerini değiştirmesine izin verilir

Bir mağazanın mülkünü asla doğrudan bir bileşende değiştirmeyin. Yalnızca mağazanın kendi özelliklerini değiştirmesine izin verilir. Her zaman mağazanın özelliğini değiştiren bir yöntem arayın. Aksi halde, uygulama durumunuz (kayıt = uygulama durumu) her yerden güncellenir ve kontrolü yavaşça kaybedersiniz. Bu hata ayıklamayı çok zorlaştırıyor.

Her bir bileşene daima @ gözlemci ile açıklama ekleyin

Her bileşene @ gözlemci ile açıklama eklemek, her bileşenin mağaza değişikliklerinde güncelleme yapmasını sağlar. Aksi takdirde, @ bileşenine eklenmiş ana bileşen, alt bileşenini güncellemek için yeniden işlenmelidir. Bu yüzden daha az bileşenin yeniden işleme tabi tutulması gerekir.

@ Hesaplanmış kullanın

Bir kullanıcı yönetici rolüne sahip olmadığında ve uygulama "yönetici modunda" olmadığında düğmenin devre dışı bırakılmasını istediğini varsayalım. Bir mağazada isAdmin gibi tek bir özellik bunun için yeterli değil. Mağazanızda hesaplanmış bir özelliğe ihtiyacınız olacak.

Muhtemelen reaksiyon yönlendiricisine ihtiyacınız yoktur

Muhtemelen reaksiyon yönlendiricisine ihtiyacınız yoktur. Daha önce de söylediğim gibi, mağazalarınızın uygulamanızın durumunu temsil etmesini istiyorsunuz. Reaksiyon yönlendiricisinin uygulama durumunuzun bir bölümünü yönetmesine izin verdiğinizde, mağazalarınızın uygulama durumunu temsil etmesine izin vermezsiniz. Bu nedenle mevcut görüntülenen görünümünüzü mağazalarınızdan birinde bulunan bir mülkte tutun. O zaman sadece mülkün ne dediğini işleyen bir bileşeniniz var.

Kontrolsüz bileşenler üzerinde kontrol edilen bileşenleri tercih etmeye çalışın

Her zaman kontrollü bileşenler oluşturmaya çalışın. Bu, test bileşenlerini ve bileşenlerin genel karmaşıklığını ele almayı kolaylaştırır.

Umarım bu basit ipuçlarında size yardımcı olabilirim.
Sorularınızı sorun veya aşağıdaki yorumlarda geri bildirimde bulunun.