Как структурировать mobx

Question

Я пытаюсь выяснить, как структурировать мое приложение, например, у меня есть модель User, универсальный UserStore, чтобы отслеживать загрузку всех пользователей до сих пор и некоторые связанные с UI магазины, такие как FriendList, PendingFriendList, 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 
} 

Мой вопрос: является ли, что путь? Или есть лучший способ?

Answer 1

Как вы, наверное, уже заметили, MobX не предписывает, как структурировать магазины, поэтому существует много возможных подходов.

Но лично я настроил бы это примерно так (это похоже на предлагаемую настройку магазина в docs). Это, может быть, немного старомодно, но легко следить за imho, это масштабируемая модель с четким разделением проблем. Альтернативные подходы могут быть найдены в этой example repo или в смежных проектах, как mobx-reactor

Небольшой совет: в вашем апи обратного вызова использовать transaction так, что все изменения будут применены сразу перед любыми наблюдателями уведомления.

Answer 2

Я работал над некоторыми проектами с Mobx &, поэтому я нашел эту структуру наиболее подходящей для меня.

Магазины

• Магазины Доменные
  • хранит данные which'll необходимы в вашем приложении.
    для ex. пользовательские данные
• Просмотреть Магазины
  • хранит данные which'll необходимо представить приложение
    напр. погрузочные, переменные ошибки

Модели

• Здесь вы можете определить модели данных
  для модели экс- пользователя

Услуги

• Здесь вы можете делать услуги, звонки api

Компоненты

• Контейнер или смарт-компонент
• Тупой или презентационный компонент