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種不同類型的用戶，其電子郵件存在的auth用戶以及訪問任何其他用戶時，沒有電子郵件，只有所有其他各個字段。處理這個多用戶數據用例的最佳方式是什麼？

1. 是否應該有2個商店有相同的重複字段，除了電子郵件？因此，上面的電子郵件在AuthStore中保持完好，然後是另一個帶有相同字段而沒有電子郵件的UserStore，並創建2個不同的原生ownerProfile.js（用於auth用戶）和profile.js（用於其他用戶）？這不正確...

2. 什麼是最好的方式來存儲登錄的userData對象，以便在應用程序刷新時檢索它（如果可用），因爲它當前清空應用程序刷新上的配置文件的userData字段並訪問因爲我使用AuthStore.userData.username.toUpperCase（）;我得到一個錯誤，因爲它試圖在null上運行.toUpperCase（）。

我碰到水合物/的toJSON但我對整個事情感到困惑，甚至不知道什麼時候/如何實現它們，或者即使他們是解決我的問題。我被困在我的項目中，因爲這個問題而無法前進。

任何想法如何解決這個使用MobX？

Answer 1

我想創建一個類User

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

然後你就可以UserStore包含User情況下，可觀察到的陣列和AuthStore具有可觀察到的領域self指向當前用戶配置文件。

創建2個不同的原生ownerProfile.js（用於auth用戶）和profile.js（用於其他用戶）？這不正確...

我通常重複使用現有的組件，但如果我開始向組件添加太多的ifs，我認爲它是一個明確的信號提取代碼到一個單獨的組件。

很難說什麼時候應該拆分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用相同的標記（或者你可以把UserProfile成HOC並將其應用到Profile和OwnerProfile出口）。

什麼是存儲登錄用戶數據對象檢索它的應用程序更新（如果可用）

您可以在mobx-contact-list例子來看看最好的方式。 Here它從localStorage加載聯繫人並將其保存到localStorage。