Determining whether a collection has loaded.

[TimFletcher]

If I subscribe to data in a controller component thus:

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
},

And I've connected this all up with Redux such that the component's props receive the campaigns:

const filterState = function filterState(state) {
  return {
    campaigns: state.campaigns,
  };
};

CampaignPage = connect(filterState)(CampaignPage);

Then it's possible to determine when the subscription is ready in render() with this.sub.ready() but at this time the data is in MiniMongo but not yet available via redux / this.props.campaigns. If I log the following within render():

console.log(this.sub.ready(), this.props.campaigns);

Then I'll get:

false undefined // sub not ready, data not available
true undefined  // sub ready, data in minimongo but not available via props
true Object {}  // sub ready, data available via redux / props

Do you know of any way to reliably determine when the data is loaded and available via redux props?

[AdamBrodzinski]

Hmmm, I haven't ran into this yet. However I rarely use the sub callbacks. Typically i've subscribed to the data and then dispatched a {CAMPAIGNS_LOADING: true} action. Then when the flux helper dispatches a 'changed' action I set the new data from minimongo and also flip the CAMPAIGNS_LOADING to false. Then my UI will get the loaded and data on the same event loop.

I'm not sure if this is the best way to do this but is how i've been typically using it. Does this help? If not let me know and perhaps we can work something else out.

[TimFletcher]

Ah, yes that absolutely helps. It never crossed my mind to dispatch an additional action for the loading state. So now I have an action creator that looks like this:

Actions.Campaigns = {
  campaignsChanged(newDocs) {
    return {
      type: 'CAMPAIGNS_COLLECTION_CHANGED',
      collection: newDocs,
    };
  },

  markLoading() {
    return {
      type: 'CAMPAIGNS_COLLECTION_LOADING',
    };
  },
};

And an associated reducer:

const initialState = {
  campaignsLoading: true,
  campaigns: [],
};

Reducers.campaigns = function campaigns(state = initialState, action) {
  switch (action.type) {

    case 'CAMPAIGNS_COLLECTION_CHANGED':
      return Object.assign({}, {
        campaignsLoading: false,
        campaigns: [...action.collection],
      });

    case 'CAMPAIGNS_COLLECTION_LOADING':
      return Object.assign({}, state, { campaignsLoading: true });

    default:
      return state;
  }
};

And I can simply use this in my component.

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
  store.dispatch(Actions.Campaigns.markLoading());
},
componentWillUnmount() {
  this.sub.stop();
},

Thanks for the help!

[AdamBrodzinski]

No prob! :+1:

Also you can cleanup the merge code by using spreads too, babel uses a Object.assign as a polyfill anyway:

case 'CAMPAIGNS_COLLECTION_LOADING':
  return {...state, campaignsLoading: true};

Also this may/may-not work depending on race conditions (which could be fixed with a startup wrap but is ugly):

const {dispatch} = store;
const {markLoading} = Actions.Campaigns

...

componentWillMount() {
  this.sub = Meteor.subscribe('campaigns');
  dispatch(markLoading());
},