Best FlowRouter + React subscription pattern?

1

Hi,

I’m trying to follow “best practices” for React/FlowRouter and handle my subscriptions in my components:

For example:

<List>
<Post postId="idstring" />
<Post postId="idstring" />
...
</List>

Then in my getMeteorData() function I subscribe to the post:

getMeteorData() {
    var handle = Meteor.subscribe('postById', this.props.id);
    if(handle.ready()) {
        return {
            post: Posts.findOne({_id: this.props.id}),
       }
    }
}

This seems the most correct way to do this, because all the handling is contained within the component, and it can be used everywhere without needing any external data. But it is slow when rendering large lists (1000 items) because this results in 1000 subscriptions.

A faster way would be to subscribe to all posts in <List> and pass the post object to each <Post> but this does not seem the cleanest way to do this.

What would be the correct way of doing something like this? I’m moving to fetching the data in <List> and using meteorhacks:subs-manager for now, but it doesn’t feel 100% right.

2

I think in react, create a container component to compose data for child components is better than get data in each components.

You can take a look at https://medium.com/modern-user-interfaces/a-reusable-state-container-with-meteor-react-8036d8cf6fde#.8kw2vdueo

1 Like
3

Subscribe to your posts in an outer container, and pass each individual post to individual post-components using a map function. This is described in a lot of React tutorials, and uses Reacts own patterns for one-way data bindings. Look [here] (https://facebook.github.io/react/docs/multiple-components.html) - it’s described in the “dynamic children” section.

1 Like
4

Thanks, seem like I was wrong :smile: Couldn’t get flowrouter-ssr to work with this approach … but since it adds a lot to the initial loading time I’m not using it right now.