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 种不同类型的用户，一个 auth 用户有他们的电子邮件，当他们访问任何其他用户时，没有电子邮件，只有所有其他相应的字段。处理这个多用户数据用例的最佳方法是什么？

  1. 除了电子邮件之外，是否应该有 2 家商店具有相同的重复字段？所以上面的电子邮件在 AuthStore 中完好无损，然后另一个 UserStore 具有相同的字段而没有电子邮件，并创建 2 个不同的反应原生 ownerProfile.js（对于 auth 用户）和 profile.js（对于其他用户）？这感觉不太对...

  2. 存储已登录的 userData 对象以在应用程序刷新时检索它（如果可用）的最佳方法是什么，因为它当前在应用程序刷新时清空配置文件的 userData 字段，并且由于我使用 AuthStore.userData.username 访问配置文件会导致错误。 toUpperCase(); 我收到一个错误，因为它试图在 null 上运行 .toUpperCase() 。

我遇到了 hydrate/toJson 但我对整个事情感到困惑，甚至不确定何时/如何实施它们，或者即使它们是我问题的解决方案。由于这个问题，我被困在我的项目上，无法继续前进。

知道如何使用 MobX 解决这个问题吗？

4

1 回答 1

3

我会创建一个类User

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

然后你可以让which 包含一个可观察的实例UserStore数组，并且它有一个指向当前用户配置文件的 observable 字段。UserAuthStoreself

创建 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）。

如果可用，存储登录的 userData 对象以在应用程序刷新时检索它的最佳方法是什么

你可以看看mobx-contact-list例子。在这里，它从 localStorage 加载联系人，并在此处将其保存到 localStorage。

于 2016-07-24T02:50:59.393 回答