【问题标题】：Meteor app data structure for the current user?当前用户的 Meteor 应用程序数据结构？
【发布时间】：2017-08-07 10:11:42
【问题描述】：

我正在使用 React 和 Meteor。

在顶层，我有一个 MainWrapper 组件。如果用户数据尚未到达则显示加载，如果没有用户则登录/注册，然后如果有所有用户数据则显示真实页面。

这是为了防止组件使用 Meteor.user() 并且在数据到达时重新渲染之前的一小段时间未定义。

那么，进入真正的问题：

这是在 MainWrapper 的底部。

export default createContainer(() => {
    return {
        user: Meteor.user(),
    };
}, MainWrapper);

每个用户帐户文档都有一个包含名字、朋友、通知等的个人资料属性。所以我非常需要有关应用程序的这些数据。

我最好将用户作为 MainWrapper 的道具传递下去吗？

或者我应该在每个需要它的组件中订阅该数据吗？（或者我什至需要订阅吗？如果组件仅在 MainWrapper 确保用户可用时才加载，那么我可以在组件中使用 Meteor.user() 而无需额外开销吗？）

任何帮助将不胜感激！

【问题讨论】：

这个问题是meteor 特有的，还是您只是在react 中询问您需要如何以正确的方式 做到这一点？

标签： reactjs meteor meteor-accounts

【解决方案1】：

好问题！

一般来说，您想知道如何管理您的应用程序状态。有状态管理库（Flux、Redux 等）。它们处理您的状态，并且您的组件订阅状态的更改。

我最好将用户作为 MainWrapper 的道具传递下去吗？

这样做，您必须将道具传递给每个子组件。假设你有 A -> B -> C -> D 组件。

如果你想将用户对象从 A 传递到 D，那么你必须确保 B 和 C 也传递是。它对错误很友好，因为您很容易忘记在很长一段时间内传递它。然而，这里的大问题是您使所有组件都依赖于用户对象。想象一下，你想在其他地方重用 B 组件，但它依赖于用户对象？

如何正确管理状态，从而使我的组件可重用？

我们以 Redux 为例（我有这方面的经验）。您可以将您的组件分离为展示和容器。简而言之，Presentational 组件未订阅 Store（您的状态），您可以在任何地方重用它们。另一方面，Container 组件被订阅到 Store，它们将 props 传递给包含的子 Presentational 组件。

这里有一些关于 Presentational & Containers 组件的好读物：

结论

所以组件分离的想法也可以在 Meteor 中实现。例如，您的 Meteor 应用程序将充当 API，而 Redux 将处理前端应用程序逻辑和状态。有不同的实现。这是good read 如何将 Redux 集成到 Meteor 中。

当然，您可以跳过 Redux（或任何其他状态库）并使用 Meteor 工具集实现组件分离。

请记住，我的回答是经验丰富的 React 和 Redux，并为您提供了如何更好地组织组件的通用思路。

【讨论】：

【解决方案2】：

我认为在客户端 (but let's double check) 上调用 Meteor.user() 没有开销担心。

因此，如果您的组件依赖于所定义的Meteor.user()，仅在用户加载后才呈现，您可以在需要时查询Meteor.user()。
另一种方法是使用React context 传递此信息。该文档列出了一些警告并说这是一个实验性功能。我已经使用了一段时间，我对它非常满意。当您有一个必须将父母的道具传递给他们的孩子的组件列表时，它可以解决@Jordan 提到的问题。这看起来像：

export class MainWrapper extends Component {
  // specify some properties to make available to all descendant
  getChildContext() {
    return {
      currentUser: Meteor.user(),
    };
  }
}
MainWrapper.childContextTypes = { currentUser: PropTypes.object };


class SomeComponent extends Component {
  render() {
    const user = this.context.currentUser;
    ...
  }
};

我实际上更喜欢第二种方法，因为它可以很好地将 UI 与数据依赖分开，并使您的组件更容易在 Meteor 上下文中进行测试。此时是否需要 redux 由您决定。

更一般地说，您可能希望查看将反应对象分离为 UI 角色/数据状态角色的容器/组件结构。如果你这样做，你肯定应该在容器部分进行Meteor.user() 获取。我非常推荐它。 React Komposer 使操作变得容易，并允许您指定要在数据加载时呈现的占位符组件：1、2。您可能还对 my fork 感兴趣，它专门处理 React 上下文，但与主 repo 不完全同步。

【讨论】：