properly using Meteorjs with Reactjs?

Question

I've added the 'meteor-react' package and am going over the Microscope tutorial. Along the way, I'm just replacing the Blaze template steps with React, but I'm unsure of how to do it properly such that Collections will be reactive with the Reactjs framework.

"Posts" is a mongo collection. In my main.js:

// Startup application
Meteor.startup(function() {
   var target = document.getElementsByTagName('body')[0]; 
   var data = Posts.find().fetch();  // RACE CONDITION occurs here.
   React.renderComponent(new StreamAtom({ "data": data}), target);
});

In StreamAtom.jsx react component, the "data" is simply set as the initial state.

Problem:

There is a race condition with the Posts.find().fetch() so most of the time the page doesn't render. There's no callbacks in Meteor and Blaze takes care of " Posts.find() " without callbacks, so What am I missing?

Also, how do I use only Posts.find() without the fetch? Since fetch() returns an array of results instead of a Mongo cursor, I'm afraid React won't actually be reactive to the changes to the collection.

Thanks a lot in advance,

I hope this will help me to understand meteor better.

imslavko imslavko · Accepted Answer · 2014-11-01T06:23:31

Wrap the React render function call into Tracker.autorun - this is how most of Meteor's client-side reactivity happens:

// Startup application
Meteor.startup(function() {
  Tracker.autorun(function () {
   var target = document.getElementsByTagName('body')[0]; 
   var data = Posts.find().fetch();  // RACE CONDITION occurs here.
   React.renderComponent(new StreamAtom({ "data": data}), target);
  });
});

A comprehensive guide on Tracker: https://github.com/meteor/meteor/tree/devel/packages/tracker

properly using Meteorjs with Reactjs?

1 Answers