Mobx

Question

nasıl yapılandırılır

Uygulamamın nasıl yapılandırılacağını anlamaya çalışıyorum, örneğin, bir model Kullanıcı, tüm kullanıcıları yüklemeyi sürdürmek için genel bir UserStore ve FriendList, PendingFriendList gibi bazı UI ilişkili mağazalar var. vb gibi BlockedUserList, LikedUserList:

class User { 
    id; 
    @observable name; 
    @observable avatar; 
    // others functions and fields 
} 

class UserStore { 
    @observable users = []; 
    function resolve(id) { /*return by id*/} 
    function createOrUpdateUser(json) { /* add user to this.users */ } 
} 

class FriendStore { 
    @observable users = []; 
    hasNextPage = true; 
    currentPage = null; 

    function loadNextPage(page) { 
    api.loadFriends(page >= 0 ? page : this.currentPage + 1).then(users => { 
     users.forEach(user => { 
     this.users.push(UserStore.createOrUpdateUser(user)) 
     }) 
    }) 
    } 
} 

class PendingFriendUsers { 
    @observable users = []; 
    @observable query = null; 
    hasNextPage = true; 
    currentPage = null; 

    function loadNextPage(page) { 
    // more or less like FriendStore 
    } 
} 

class BlockedUserStore { 
    // more or less like FriendStore 
} 

sorum şu: ölüm yolu bu mu? Yoksa daha iyi bir yolu var mı?

Answer 1

Muhtemelen zaten fark ettiğiniz gibi, MobX mağazaların nasıl yapılacağını tarif etmiyor, bu yüzden birçok yaklaşım mümkün. Şahsen ben gerçekten bu şekilde kabaca kurardım (docs'daki önerilen mağaza kurulumuna benzer). Belki biraz modası geçmiş ama imho'yu takip etmek kolay, endişelerin açık bir şekilde ayrılmasıyla ölçeklenebilir bir model. Alternatif yaklaşımlar mobx-reactor

Küçük ucu gibi ilgili projelerde bu example repo veya bulunabilir: En api geri arama tüm değişiklikleri herhangi gözlemciler bildirilir önce bir kez uygulanır, böylece transaction kullanmak içinde.

Answer 2

Bazı projelerde Mobx & tepki ile çalıştım, bu yüzden bu yapı benim için en uygun olanını buldum.

Mağazaları

• Alan Mağazaları
  • verileri saklar uygulamanızda gerekli which'll. Ex için
    . kullanıcı verileri
• Görünüm Mağazaları
  • verileri saklar uygulamanızı ex
    sunmak gerekli which'll. yükleme, hata değişkenleri

Modelleri Burada

• veri modelleridir eski kullanıcı modeli için
  

Hizmetleri Burada

• yapabilirsiniz tanımlayabilirsiniz hizmetleri, api çağrıları yapmak

Bileşenleri

• Konteyner veya Akıllı Bileşen
• Salak veya sunum bileşen