CODEWITHSUNDEEP
javascriptreactjsmeteor
shubham AK
shubham AK

Reputation: 292

Meteor React Subscription

What is alternative way of using package 'react-meteor-data' ? I'm using ES6 for writing react component. What would be best approach for writing meteor subscription in react component so that it will re-render the component if anything change on the server side.

Upvotes: 0

Views: 115

Answers (2)

Chase DeAnda
Chase DeAnda

Reputation: 16441

Using react-meteor-data, you first create a HOC container that subscribes to the data and passes it down as props to your component.

Container:

import { createContainer } from 'meteor/react-meteor-data';

export default FooContainer = createContainer(() => {
  // Do all your reactive data access in this method. 
  // Note that this subscription will get cleaned up when your component is unmounted 
  var handle = Meteor.subscribe("todoList", this.props.id);

  return {
    currentUser: Meteor.user(),
    listLoading: ! handle.ready(),
    tasks: Tasks.find({listId: this.props.id}).fetch(),
  };
}, Foo);

Component:

import FooContainer from './FooContainer';

class App extends React.Component {
    render() {
        return (
            <div>
                {this.props.currentUser.name}
            </div>
        )
    }
}

export default FooContainer(App);

Check out React docs for Higher Order Components to understand how the container works.

Upvotes: 1

Jankapunkt
Jankapunkt

Reputation: 8423

What would be best approach for writing meteor subscription in react component so that it will re-render the component if anything change on the server side.

The best approach is using react-meteor-data. What is wrong with this package, that makes you think to not use it?

It even allows you to separate / decouple React Components from Meteor. This is really great because when you reach the point of having written some components that you want to reuse in another non-Meteor project you are free to go without greater hassle.

Of course you could write your own subscription container for react, but with this package you have all important stuff you need plus it is maintained and tested.

If you have trouble setting up a container for subscriptions, you may dig deeper into these tutorials:

https://guide.meteor.com/react.html

https://themeteorchef.com/tutorials/using-create-container

Upvotes: 1

Related Questions