Meteor app data structure for the current user?

I'm using React and Meteor.

At the top level I have one MainWrapper component. It shows loading if the User data hasn't arrived, login/register if there is no user and then shows the real page if it has all the User data.

This is to prevent components using Meteor.user() and it being undefined for a small moment before re-rendering when the data arrives.

So, on to the real question:

This is at the bottom of MainWrapper.

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

Each user account document has a profile property with first name, friends, notifications etc. So I need this data around the app quite a lot.

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

Or should I subscribe to that data in every component that needs it? (Or do I even need to subscribe? If the components only ever load once MainWrapper makes sure the user is available, then can I use Meteor.user() in components without extra overhead?)

Any help would be greatly appreciated!

Solution

Good question!

Generally speaking you're wondering how to manage your application state. There are state management libraries (Flux, Redux and etc.). They handle your state and your components are subscribed to the state's changes.

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

Doing it in that way you have to pass the props to every child components. Imagine you have A -> B -> C -> D components.

If you want to pass the user object from A to D, then you have to make sure B and C also pass is. It's error friendly, because you can easily forget to pass it somewhene in the long way. However the big problem here is that you make your all components dependent to the user object. Imagine you want to reuse B component somewhere else, but it is depentdent to the user object?

How can I manage the state correctly and in result my components are reusable?

Let's use Redux for example (I have experience with it). You can separate your components to Presentational and Containers. In short the Presentational components aren't subscribed to the Store (your state) and you can reuse them everywhere. On the other hand Container components are subsribed to the Store and they pass props to the included child Presentational components.

Here are some good reads about Presentational & Containers components:

Conclusion

So the idea of components separation can be implemented in Meteor too. For example your Meteor app would act as an API, while Redux would handle the front-end application logic and state. There are different implementations. Here's a good read how can you integrate Redux in Meteor.

For sure you can skip Redux (or any other state library) and implement components separation with the Meteor toolset.

Please keep in mind that my answer is React & Redux experienced and gives you generic idea how you can organize your components better.