Integrate Meteor reactive data (Tracker-aware reactive data sources) with MobX for simple yet highly optimized state management
MobX and Tracker can both autorun code when a dependency changes, however caching a copy of Meteor reactive data in a MobX store requires a significant amount of boilerplate. This package handles the complexity and provides an autorun that can be triggered by a change to either a MobX observable or Meteor reactive data source.
import { Meteor } from 'meteor/meteor';
import { observable, useStrict } from 'mobx';
import autorun, { observe } from 'meteor/space:tracker-mobx-autorun';
// Optionally MobX strict mode makes state in the store immutable, in that case
// state can ony be changed by MobX actions
useStrict(true);
const Todos = new Mongo.Collection('todos');
const state = observable({
selectedProjectId: null,
projectTodos: []
});
const syncProjectTodos = autorun(() => {
const projectId = state.selectedProjectId;
const handle = Meteor.subscribe('todos', { projectId });
const cursor = Todos.find({ projectId });
observe('todosAutorun', state.projectTodos, handle, cursor);
});
// Starting autorun on startup or when needed
Meteor.startup(() => {
if (Meteor.isClient) syncProjectTodos().start();
});
// Stopping autorun
syncProjectTodos().stop();
Trello card from April 2016 - Before and after refactoring
- React container component displays the currently selected project name.
- Original implementation used Tracker.Component.
- Application code for managing subscriptions and client state was reduced by 80%
- Number of unnecessary re-renderings reduced to 0 thanks to mobx-react
observer, this post explains how to use it properly.
meteor add space:tracker-mobx-autorun
npm install --save mobx mobx-react
Meteor 1.3 +
Developed with sponsorship from dyzio - social video marketing made easy