Using React Komposer to work with Redux and Tracker/Reactivity with Meteor

1

I’m currently using React Komposer 2 for a project but aren’t really sure how to go with my data flow. I’ve been using React and Redux in my previous project but this is the first time I’m using Meteor as the backend. I’ve read about RK2 and how to use it to inject props to the Components but I also want to keep the Reactivity that Meteor offers. And this is how RK2 solves the problem with Tracker which is “Magic” to me, does anybody know how this works?

function getTrackerLoader(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null;
    // This part is "Magic" to me, putting the `Tracker.autorun()` inside 
    //  `Tracker.nonreactive()` makes the Computation "non reactive" correct?
    //  If so why not put it outside of `.nonreactive()` function
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        trackerCleanup = reactiveMapper(props, onData, env);
      });
    });

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}

// usage
function reactiveMapper(props, onData) {
  if (Meteor.subscribe('post', props.id).ready()) {
    const post = Posts.findOne({ id: props.id });
    onData(null, { post });
  };
}

const Container = compose(getTrackerLoader(reactiveMapper))(UIComponent);

Also I’ve read a post about Bridging Redux and Meteor and it delivers a different approach:

// will run every time Messages changes
Tracker.autorun(() => {
  store.dispatch({
    type: 'SET_MESSAGES',
    messages: Messages.find().fetch(),
  });
});

With this approach I’m thinking there is no need for React Komposer at all since we can handle the Reactivity this way by dispatching the action via Tracker.autorun(), and we can use Redux connect() to pass down props, is this a correct assumption?

1 Like
2

That’s correct but the easiest way is just to use the Meteor data container suggested by the Meteor Guide. It depends on whether you need that data in Redux for some reason.

3

Awesome! Thank you @sashko for confirming that. Are you using the similar pattern currently or have you come up with a better approach?

4

That’s the one we are using in production right now.

1 Like