9

私は自分のアプリを構築する方法を理解しようとしています.それ：

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
}

私の質問は次のとおりです。それとももっと良い方法がありますか??

4

3 に答える 3

8

お気づきかもしれませんが、MobX ではストアの構造を規定していないため、さまざまなアプローチが可能です。

しかし、個人的には、この方法で大まかにセットアップします (ドキュメントで提案されているストアのセットアップに似ています)。少し時代遅れかもしれませんが、私見に従うのは簡単です。これは、懸念事項が明確に分離されたスケーラブルなモデルです。別のアプローチは、このサンプル リポジトリまたはmobx-reactorなどの関連プロジェクトで見つけることができます。

transaction小さなヒント:オブザーバーに通知される前に、すべての変更が一度に適用されるように、API コールバックを使用します。

于 2016-04-29T09:37:21.253 に答える