MobX - ユーザプロファイルの異なる分野とヌル、デフォルトの問題

Question

私はこれらの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（authユーザー用）とprofile.js（他のユーザー用）を作成しますか？これは正しく感じられません...

2. ログインしているuserDataオブジェクトを保存して、アプリケーションの更新時に取得するには、どうすればよいですか？現在、アプリの更新時にプロファイルのuserDataフィールドを空にして私はAuthStore.userData.username.toUpperCase（）を使用しているため、プロファイルにエラーが発生します。 nullで.toUpperCase（）を実行しようとしているため、エラーが発生します。

私は水和物/ toJsonに出くわしたが、私は全部で混乱、および/それらを実装する方法場合、または、彼らは私の問題を解決している場合でも、でも、わかりません。私は自分のプロジェクトに立ち往生しており、この問題のために前進することはできません。

MobXを使用してこれを解決するにはどうすればよいですか？

Answer 1

私は、あなたは現在のユーザープロファイルを指して、観察フィールドselfがありUserインスタンスとAuthStoreの観察可能な配列を含むUserStoreを作ることができますUser

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

クラスを作成します。

2つの異なるネイティブownerProfile.js（authユーザー用）とprofile.js（他のユーザー用）を作成しますか？これは正しく感じられません...

私は通常、既存のコンポーネントを再利用しますが、コンポーネントにあまりにも多くのifを追加し始めると、別のコンポーネントにコードを抽出する明確な信号と考えています。

分割する必要があるときは分かりにくいです。OwnerProfileとProfileは、表示する内容によって異なります。あなたは同じマークアップ（またはあなたがHOCにUserProfileをオンにし、輸出にProfileとOwnerProfileに適用することができます）と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> 
); 
} 

ような何かを行うことができますことを覚えておいてください。それは

利用できる場合は、 mobx-contact-list例を見てみることができますアプリケーションの更新でそれを取得するためのuserdataオブジェクトにログインを格納するための最良の方法は何

。 Here localstorageから連絡先をロードし、hereをlocalStorageに保存します。