当前用户的流星应用程序数据结构？

Question

我正在使用 React 和 Meteor。

在顶层我有一个 MainWrapper 组件。如果用户数据尚未到达，则显示正在加载；如果没有用户，则显示 login/register；如果包含所有用户数据，则显示真实页面。

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

所以，进入真正的问题：

这是 MainWrapper 的底部。

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

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

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

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

如有任何帮助，我们将不胜感激！

Answer 1

问得好！

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

Is it best for me to pass the user down as a prop from the MainWrapper?

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

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

如何才能正确管理状态并使我的组件可重用？

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

这里有一些关于演示和容器组件的好读物：

结论

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

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

请记住，我的回答是 React 和 Redux 经验丰富的，可以让您了解如何更好地组织组件。

Answer 2

我认为在客户端调用 Meteor.user() 不会产生开销 (but let's double check) 在服务器上肯定会有开销，因为这会查询数据库，但除非你在做服务器侧面渲染这不是问题。

因此，如果您的组件依赖于 Meteor.user() 的定义仅在用户加载后呈现，您可以在需要时查询 Meteor.user()。
另一种方法是使用React context来传递这个信息。该文档列出了一些注意事项，并表示这是一项实验性功能。我已经使用它一段时间了，我对它非常满意。当您有一个组件列表必须将 parent 的道具传递给它们的 children 时，它是为了解决@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 角色/data-state 角色中分隔反应 object 的容器/组件结构。如果你这样做，你肯定应该在容器部分进行 Meteor.user() 获取。我很推荐它。 React Komposer 使它变得容易，并允许您指定在加载数据时要呈现的占位符组件：1, 2. You might also be interested in my fork 专门处理 React 上下文，但与主仓库不完全同步。

当前用户的流星应用程序数据结构？

Meteor app data structure for the current user?

meteor

reactjs

meteor-accounts

如何才能正确管理状态并使我的组件可重用？

结论