reactjs - 当前用户的 Meteor 应用数据结构？

Question

我正在使用 React 和 Meteor。

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

这是为了防止组件使用 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?

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

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

<小时/>

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

让我们以 Redux 为例(我有这方面的经验)。您可以将组件分为展示组件和容器组件。简而言之，展示组件不会订阅商店(您的状态)，您可以在任何地方重用它们。另一方面，容器组件订阅了 Store，并将 props 传递给包含的子展示组件。

以下是一些有关展示和容器组件的好读物:

1. By the author of Redux
2. Good comparision .

<小时/>

结论

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

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

请记住，我的回答是 React 和 Redux 经验丰富的，并且为您提供了如何更好地组织组件的一般想法。