2

userDataこれらのデフォルトのAuthStoreがあります：

@observable userData = {
   username:  null,
   firstname: null,
   lastname:  null,
   email:     null
}

オブジェクトは、ログイン時にそれぞれのフィールドに取り込まれ、次のようになります。

@observable userData = {
    username:  "jdoe",
    firstname: "john",
    lastname:  "doe",
    email:     "johndoe@website.com" <— This field is special
}

電子メール フィールドは特殊です。認証されたユーザーが自分のプロファイルを表示したときに、そのプロファイルにある場合にのみ取得/存在する必要があります。別のユーザーのプロファイルにアクセスすると、メール以外のすべてのフィールドが存在する必要があり、メールなしで API から取得されます。

これらは 2 つの異なるタイプのユーザーであるため、電子メールが存在する認証ユーザーであり、他のユーザーにアクセスすると、電子メールはなく、他のすべてのそれぞれのフィールドがあります。このマルチ userData ユースケースを処理する最善の方法は何ですか?

  1. 電子メールを除いて、同じ繰り返しフィールドを持つ 2 つのストアが存在する必要がありますか? 上記の AuthStore で電子メールをそのまま使用し、次に電子メールなしで同じフィールドを持つ別の UserStore を作成し、2 つの異なる反応ネイティブ ownerProfile.js (認証ユーザー用) と profile.js (他のユーザー用) を作成しますか? これは気分が悪い...

  2. 現在、AuthStore.userData.username を使用しているため、アプリの更新時にプロファイルの userData フィールドが空になり、プロファイルにアクセスするとエラーが発生するため、ログインした userData オブジェクトを保存して、アプリケーションの更新時に取得する最善の方法は何ですか? toUpperCase(); nullで.toUpperCase()を実行しようとしているため、エラーが発生します。

水和物/toJsonに出くわしましたが、全体に混乱しており、それらをいつ/どのように実装するか、またはそれらが私の問題の解決策であるかどうかさえわかりません。私は自分のプロジェクトで立ち往生しており、この問題のために先に進むことができません。

MobXを使用してこれを解決する方法はありますか?

4

1 に答える 1

3

私はクラスを作成しますUser

class User {
  @observable username = null;
  @observable firstname = null;
  @observable lastname = null;
  @observable email = null;
}

次に、監視可能なインスタンスUserStoreの配列を含むものと、現在のユーザー プロファイルを指す監視可能なフィールドを持つものを作成できます。UserAuthStoreself

2 つの異なる反応ネイティブ ownerProfile.js (認証ユーザー用) と profile.js (他のユーザー用) を作成しますか? これは気分が悪い...

私は通常、既存のコンポーネントを再利用しますが、コンポーネントにあまりにも多くの if を追加し始めると、コードを別のコンポーネントに抽出する明確なシグナルと見なします。

いつ分割すべきかを言うのは難しく、OwnerProfileそこでProfile何を見せたいかによって異なります。このようなことができることを覚えておいてください

function UserProfile({ user, otherProps }) {
  return (
   <common>
    <markup>
     <goes here>
     { user.email 
       ? <OwnerProfile user={user} {...otherProps} />
       : <Profile user={user} {...otherProps} />
     </goes here>
    </markup>
   </common>
  );
}

OwnerProfile同じマークアップでラップする必要がある場合Profile(または、HOC に変換してエクスポートに適用することもできます) UserProfile。ProfileOwnerProfile

ログインした userData オブジェクトを保存して、利用可能な場合にアプリケーションの更新時に取得する最良の方法は何ですか?

例を見ることができますmobx-contact-list。ここでは localStorage から連絡先を読み込み、ここでは localStorage に保存します。

于 2016-07-24T02:50:59.393 に答える