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个具有相同重复字段的商店？所以上面的电子邮件在AuthStore中完好无损，然后是另一个没有电子邮件的相同字段的UserStore，并创建2个不同的本地ownerProfile.js（用于auth用户）和profile.js（用于其他用户）？这感觉不对......
存储已登录的userData对象以便在应用程序刷新时检索它的最佳方法是什么（如果它可用），因为它当前清空应用程序刷新时配置文件的userData字段并且访问配置文件导致错误，因为我使用AuthStore.userData.username.toUpperCase（）;我收到一个错误，因为它试图在null上运行.toUpperCase（）。

我遇到了hydrate / 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和{{1}出口）。

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

您可以查看mobx-contact-list示例。 Here它从localStorage加载联系人，here将联系人保存到localStorage。

MobX - 用户配置文件不同的字段和null默认值问题

1 个答案: