tracker-mobx-autorun

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

tracker-mobx-autorun

★ 32 Open GitHub ↗

Integrate Meteor reactive data with MobX for simple yet highly optimized state management

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tracker MobX autorun

_Integrate Meteor reactive data 
([Tracker-aware reactive data sources](https://github.com/meteor/meteor/blob/devel/packages/tracker/README.md#tracker-aware-libraries-from-the-meteor-project))
with [MobX](https://mobxjs.github.io/mobx/) for simple yet highly
optimized state management_

MobX and [Tracker](https://docs.meteor.com/api/tracker.html#Tracker-autorun) can both [autorun](https://mobxjs.github.io/mobx/refguide/autorun.html) 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](https://mobxjs.github.io/mobx/refguide/observable.html) _or_ Meteor reactive data source.

### Usage

```javascript
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: []
});

// Starting autorun on startup or when needed
Meteor.startup(() => {
  if (Meteor.isClient) syncProjectTodos().start();
});

// Stopping autorun
syncProjectTodos().stop();

```

## Before and After
![aNativ image](https://raw.githubusercontent.com/meteor-space/tracker-mobx-autorun/master/trello-card.png)
_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](https://github.com/mobxjs/mobx/issues/101#issuecomment-220891704)
explains how to use it properly.

## Installation

`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](https://www.dyzio.co)

tracker-mobx-autorun

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README