What is a "data container?" (from Meteor React tutorial)


#1

In the Meteor React tutorial, there is a comment about "In your data container, you can use Meteor.user() to check if a user is logged in and get information about them."
https://www.meteor.com/tutorials/react/adding-user-accounts

I see client and server starting points, components for rendering, and api code for binding to the Mongo collections, but what exactly is a “data container” in this context?


#2

I don’t use React, but by the look of it, my guess is that createContainer is Meteor’s way of turning Meteor observables into React observables, since Meteor and React use different reactivity systems. I use meteor-vue, which has a similar thing.

Take a look at the whole example code here. It’s at the bottom.


#3

Isn’t the function returned by createContainer() run on the client? It seems to execute every time there is a property change in the client. I guess I am fuzzy on what terminology discriminates between client data and server data.

I see in the Meteor guide that createContainer() possibly is deprecated, and is replaced by the withTracker() function. withTracker() seems to create a container component, which is React jargon for a wrapper that provides data access for a component. I am unsure whether withTracker() is related to Meteor’s Tracker subsystem.



#4

Of course it’s on the client, it interacts with React after all :stuck_out_tongue:
Yeah, Tracker is Meteor’s reactivity system, which is used everywhere, on Collections, ReactiveVars, etc.
The function you provide to createContainer/withTracker is probably passed to Tracker.Autorun, which listens to changes to any reactive sources you use in the function and updates the data in your React component.

Taking a look at the todo app, api/tasks.js runs on both client and server, and the files in the ui folder obviously run on the client.

Looking at the source (1 real line of code!) withTracker is just a renaming and syntax change of createContainer.


#5

I’ve gone through the same education last month as I started using Meteor and also started using React. Aside from what were mentioned above, here are some summaries of what I learned after 1.5 months tinkering with Meteor and React:

  • createContainer is a Higher Order Component in React’s parlance
  • Reactivity happens within createContainer. If a reactive variable is updated, createContainer automatically passes it to the child component (in this case, the component you called with createContainer) through the props variable.
  • similar with other React component, you can then use those passed props variable in the lifecycle functions of React like componentWillReceiveProps()