Combine MobX and Tracker (createContainer)

Hey guys,
I’m trying to pass an observable (MobX) to my data container (Meteor). Currently, I’ve modified the typical createContainer like this:

@observer
class Container extends React.Component {

render() {
    const searchString = new RegExp(SearchStore.searchString,"ig"); // MobX observable from store

    const DataContainer = createContainer((props) => {
        return {
            playlist: Playlist.find({title:searchString});
        };

    },HeaderComponent);

    return <DataContainer/>
 }
}

This is working pretty will on our device. I have to say that we are using it on a RN application. I’m just wondering if this is the best solution, because every change (render) would generate a totally new createContainer element.

Okay, I guess this structure is much better:

const MeteorContainer =  createContainer((props) => {
    return {
        playlist: Playlist.find({title:searchString});
    },Header);


@observer
class Container extends React.Component {

render() {
  const searchString = new RegExp(SearchStore.searchString,"ig"); // MobX observable from store
  return <MeteorContainer searchString={searchString}/>
 }
}

Hi,
That’s my problem and I same you did it. but is there the other problem. Data is not reactive how to fix it?

Normally it should be reactive. You pass the changing observables of MobX down to the Meteor container which updates on new properties or changed Tracker values.

Thanks this is my container code:

import {Meteor} from 'meteor/meteor';
import React,{Component} from 'react';
import {Roles} from 'meteor/alanning:roles';
import {browserHistory} from 'react-router';
import {createContainer} from 'meteor/react-meteor-data';
import UsersAll from '../all.jsx';
import {Academies}  from '../../../../api/academies/academies.js';
import {_} from 'meteor/underscore';
import observableTackStore from '../../../mobx/states.js';
import {observer} from 'mobx-react';

const UsersMeteorContainer = createContainer((props) => {
   
  pageNumber":"2","sizePerPage":"10
 
    // console.log('props :' + JSON.stringify(props,null,'\t'));
    console.log('observablePoonezStore : ' + JSON.stringify(props.filterObject ));
    
  

    const {pageNumber,sizePerPage} = props.params;
    const {sortName,sortOrder} = props.location.query;

    let sort = [];
    let selector = {};

    if(sortOrder){
      
        if(sortName == 'family' || sortName == 'name') {
            sort = [`profile.${sortName}`,sortOrder]
        }else{
            sort = [sortName,sortOrder]
        }

    }
    let users, academies;
    let skipCount = (pageNumber - 1) * sizePerPage;
    const handleUser = Meteor.subscribe('users.all',skipCount ,parseInt(sizePerPage) ,sort,props.filterObject);
    const loading = !handleUser.ready()  ;

    if (!loading) {
        users = Meteor.users.find().fetch();
        academies = Academies.find().fetch();
    }

    return {
        pageNumber,
        sizePerPage,
        loading,
        users: (users) ? users : [],
        academies: (academies) ? academies : []
    };
}, UsersAll);


@observer
class UsersContainer extends Component {
    render() {

        console.log('this.props :' + JSON.stringify(observableTackStore.filterObject));
        return  <UsersMeteorContainer {...this.props} filterObject={observableTackStore.filterObject} />
    }
}
export default UsersContainer;

and this below code is my Store:


import {observable} from 'mobx';

class ObservableTackStore {
    @observable filterObject = {
        name: null,
        value: null
    };
    addObj() {
        console.log(JSON.stringify(this.filterObject));
    }
}

const observableTackStore = new ObservableTackStore();
export default observableTackStore;

is there any problem here?
Thanks for helping me.

Did you check your console output? Does only the one in the observer container work or also the one in createContainer if you change the store value?

excuse me,I don’t understand what you mean. :pensive: this is my problem
I have a filter for my table. I want filtering data from server. in my container I was pass selector to subscribe and get filtered data from server. also I want real time selector, that’s mean: typing some text and text send to subscribe. with no clicking button. like this:

const handleUser = Meteor.subscribe('users.all',skipCount ,parseInt(sizePerPage) ,sort,selector);

how to implement this ??

I just mean if your console.log fires if you change observableTackStore.filterObj. Normally both should fire (in your UsersContainer and UsersMeteorContainer).

I checked it again and unfortunately nothings print as console.log. :worried: