How do I use the tracker-mobx-autorun package?

help
1

I’ve been using mobx/react for a while now, i got a new project so i’ve decided to use meteor instead of express. But I can’t seem to find a way to connect my subscriptions to a mobx store and have it automatically reactive.

i found this package tracker-mobx-autorun but i have no idea how i would use this with react. If you’ve used it before, an example will suffice. i’m a very fast learner.

thanks a lot.

1 Like
2

did you worked it out @seunlanlege?
Any hint?

3

autoruns/dashAutoruns.js

//  @flow
import { Meteor } from 'meteor/meteor'
import Dash from '../store/DashboardStore'
import User from '../store/User'
import { Donor } from '../Classes/Donor'
import { Beneficiary } from '../Classes/Beneficiary'
import { DonationPackages } from '../Classes/Packages'

import autorun from 'meteor/space:tracker-mobx-autorun'

const DashAutorun = () => {
  if (User.userId) {
    const handleDonations = Meteor.subscribe('user.donations')
    const handleWithdrawals = Meteor.subscribe('user.withdrawals')
    const handlePackages = Meteor.subscribe('packages')

    if (User.isKanye) {
      const images = Meteor.subscribe('images.all')
      Dash.toggleLoading('isImagesLoading', !images.ready())
    }

    if (handlePackages.ready()) {
      Dash.toggleLoading('isDonationPackageLoading', !handlePackages.ready())
      Dash.setDonationPackages(DonationPackages.find().fetch())
    }

    if (handleDonations.ready()) {
      Dash.toggleLoading('isDonationLoading', !handleDonations.ready())
      Meteor.user().isKanye
        ? Dash.setDonations(Donor.find().fetch())
        : Dash.setDonations(Donor.find({ donor: User.userId }).fetch())
    }

    if (handleWithdrawals.ready()) {
      Dash.toggleLoading('isWithdrawalLoading', !handleWithdrawals.ready())
      Meteor.user().isKanye
        ? Dash.setWithdrawals(Beneficiary.find().fetch())
        : Dash.setWithdrawals(Beneficiary.find({ beneficiary: User.userId }).fetch())
    }

	
  }
}

export default autorun(DashAutorun)

client/main.js

import { FlowRouter } from 'meteor/kadira:flow-router'
import { Meteor } from 'meteor/meteor'

import '../imports/startup/client'
import dashAutoruns from '../imports/autoruns/dashAutoruns'

FlowRouter.wait()

Meteor.startup(() => {
  dashAutoruns.start()
  FlowRouter.initialize()
})
4

Thank you for your code snippet.

Question… Do I need to .start() all my autoruns at once? Or can I do it
on a container on another route page?

If its the case, does it affect performance too many autoruns started at
once?

5

you can start it anywhere, conditionally and in your route triggers.

6

Sorry for the late reply, but, I am having an issue, It might happened to you.

If I start the autorun on a container which is rendered on home page, when I navigate to /about and then switch back to /home, the autorun is called again, and therefore getting unwanted side effects, such as, if I have a button to insert a Todo, when pressing it, the list will show 2 additional Todos.

How do I stop the autorun on the container?