Using Meteor Reactive Variables with a ReactJS Frontend

Question

So I've been playing with ReactJS as a front end to Meteor, and unless I'm missing something, I'm not sure how I can use a reactive-var to update my news feed. Below is the code I have now:

Dashboard = React.createClass({
    mixins: [ ReactMeteorData ],
    getMeteorData() {
        let subscription = Meteor.subscribe( 'newsFeed' );
        let page = new ReactiveVar();
        page.set(0);

        return {
            isLoading: !subscription.ready(),
            news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
            page: page,
            totalCount: Counts.get( 'newsCounter' )
        };
    },
    componentDidMount() {

    },
    newer() {
        this.data.page.set(this.data.page.get() + 1);

        console.log(this.data.page.get());
    },
    older() {
        if(this.data.page.get() > 0)
            this.data.page.set(this.data.page.get() - 1);

        console.log(this.data.page.get());
    },
    render() {
        if ( this.data.isLoading ) {
            return <Loading />;
        } else {
            return (
                <div>
                    <NewsList news={this.data.news} />
                    <ul className="pager">
                        <li className={this.data.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
                        <li className="next" onClick={this.newer}><a href="#">Newer →</a></li>
                    </ul>
                </div>
            );
        }
    }
});

Currently when I click the newer button it does seem to increment the page variable but it never goes past 1, and the older button seemingly will take it from 1 back to 0, but I'm not 100% sure. I'm not sure what I'm getting wrong with the reactive variable, I know it doesn't work the same as Blaze which is obvious, but I can't seem to find any explanation or example of how to use them.

If someone could help me out, either through example, correction, or just a link to a decent piece of documentation that would be amazing.

Dave · Accepted Answer · 2015-11-02 16:01:02Z

3

You need to move your page variable into getInitialState.

Dashboard = React.createClass({
    mixins: [ ReactMeteorData ],
    getInitialState() {
        let page = new ReactiveVar(0);
        return { page };
    },
    getMeteorData() {
        let subscription = Meteor.subscribe( 'newsFeed' );

        return {
            isLoading: !subscription.ready(),
            news: News.find({}, {limit: 3, skip: (page.get() * 3), sort: {createdDate: 1}}).fetch(),
            totalCount: Counts.get( 'newsCounter' )
        };
    },
    componentDidMount() {

    },
    newer() {
        this.state.page.set(this.state.page.get() + 1);

        console.log(this.state.page.get());
    },
    older() {
        if(this.state.page.get() > 0)
            this.state.page.set(this.state.page.get() - 1);
    },
    render() {
        if ( this.data.isLoading ) {
            return <Loading />;
        } else {
            return (
                <div>
                    <NewsList news={this.data.news} />
                    <ul className="pager">
                        <li className={this.state.page.get() <= 0 ? 'previous disabled' : 'previous' } onClick={this.older}><a href="#">← Older</a></li>
                        <li className="next" onClick={this.newer}><a href="#">Newer →</a></li>
                    </ul>
                </div>
            );
        }
    }
});

answered Nov 2, 2015 at 16:01

Dave

2,5862 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chmac Over a year ago

Does this really make sense? If you're using state, I guess you don't need (and probably don't want) to use a ReactiveVar.

Dave Over a year ago

The question was how to link ReactiveVar and React together, the landscape has changed quite a bit since this post. The accepted practice today I believe would be to use React-Komposer with ComposeWithTracker and not use getMeteorData at all.

chmac Over a year ago

Understood. It was the use of a ReactiveVar assigned to state that got me wondering. Felt like it could be a source of unpredcitability by using something which is not a plain object inside React's state.

Collectives™ on Stack Overflow

Using Meteor Reactive Variables with a ReactJS Frontend

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related