I’m new to Meteor and currently trying to understand if I should use Blaze or React going forward. One thing that buggers me about the React solution is that it seems I have to do massive amounts of code duplication, or I might just be missing something.
According to the docs, basically every my component would have something like this code:
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import React from 'react';
import { Lists } from '/imports/api/lists.js';
export default class ListPage extends React.Component {
render() {
if (loading) {
return (
<Card fluid>
<Card.Content>
<Loader active />
</Card.Content>
</Card>
)
}
return (
...
);
}
}
ListPage.propTypes = {
list: React.PropTypes.object,
todos: React.PropTypes.array,
loading: React.PropTypes.bool,
listExists: React.PropTypes.bool,
};
export default ListPageContainer = withTracker(({ id }) => {
const todosHandle = Meteor.subscribe('todos.inList', id);
const loading = !todosHandle.ready();
const list = Lists.findOne(id);
const listExists = !loading && !!list;
return {
loading,
list,
listExists,
todos: listExists ? list.todos().fetch() : [],
};
})(ListPage);
which strikes me as odd. Is there no better way to do this in a centralized way? Shouldn’t I be able to say somewhere (e.g. router definition or such) “hey, on this page I need these subscriptions and also on every page show a loader until all subscriptions are ready” ?
What obvious thing am I missing?