how to wrap autorun to react ?

[crapthings]

No description provided.

[darko-mijic]

Hello @crapthings,

There is a package mobx-react with react component wrapper for combining React with MobX:
https://github.com/mobxjs/mobx-react

Read this post to learn how to use observer decorator properly.

You will need presentational component that looks like this, the only specific thing here is usage of propTypes from mobx-react to specify observableArray type for todos:

import React from 'react';
import { propTypes } from 'mobx-react';

const TodosList = ({ todos }) => (
  <div>
    <ul>
      {todos.map(todo => (
        <li key={todo._id}>{todo.title}</li>
      ))}
    </ul>
  </div>
);

TodosList.propTypes = {
  posts: propTypes.observableArray.isRequired
};

export default TodosList;

Than provide container component with data from MobX managed state from the store and decorate it with mobx-react observer:

import React, { Component } from 'react';
import TodosList from '../components/todos/todos-list';
import { observer } from 'mobx-react';
import state from '../store';

export default observer(class extends Component {
  render() {
    if (!state.projectTodos) {
      return <div>Loading...</div>;
    }
    return (<TodosList todos={state.projectTodos}/>);
  }
});

[crapthings]

okay but where should i put Collection.find().fetch() ? that make reactive

if we're not using react komposer or things like that ?

[darko-mijic]

You subscribe and fetch data in autoruns and update the store. Than you can use data from the store in any container component. That is the best part and key for boilerplate reduction, you don't need to subscribe and fetch data in every container component. You don't need to do that in any container component, you just use data from the store. Autoruns are doing the heavy lifting, in this instance projectTodos will be reactively updated whenever there is new data in Todos collection or selectedProjectId changes. There is sample code in the readme, here is a more condensed version:

import { Meteor } from 'meteor/meteor';
import { observable } from 'mobx';
import autorun from 'meteor/space:tracker-mobx-autorun';

const Todos = new Mongo.Collection('todos');

const state = observable({
  selectedProjectId: null,
  projectTodos: []
});

const syncProjectTodos = autorun(() => {
  const projectId = state.selectedProjectId;
  Meteor.subscribe('todos', {projectId});
  state.projectTodos = Todos.find({projectId}).fetch();
});

Meteor.startup(() => {
  if (Meteor.isClient) syncProjectTodos().start();
});

[crapthings]

Cool !!! i'll try and see how far i can go

thanks @darko-mijic

[markshust]

This is a fantastic package.

I was wondering specifically about Meteor subscriptions and cleanups. It seems react-komposer automatically unsubscribes subscriptions when the container components unmounts (see https://voice.kadira.io/using-meteor-data-and-react-with-meteor-1-3-13cb0935dedb#.l0beurol2 -- FAQ). This is my only concern using this package/architecture. Other than this I LOVE it.

Should be build a custom composer for creating container components, that "turns on" the Meteor + MobX autoruns, and "turns off" when the container component unmounts? I'm building a fairly large app, and I can imagine someone navigating around many of the aspects of the app, only to have many, many unneeded subscriptions that will eventually bog down/crash the server.