Getting Reactive Data

Getting Reactive Data
by Mayank

Assumptions
● Reactivity
● Publish
● Subscribe
● Basic idea about Meteor

What is it about
● How to get reactive data in component
● What is createContainer
● Usage of publish subscribe

What is createContainer
● A wrapper around actual component
● Handles reactive data
● Uses props to pass the data to actual component
● Component created using createContainer will re-render whenever there is a
change in reactive data

Installation
To install run:
meteor add react-meteor-data

Usage
import { createContainer } from 'meteor/react-meteor-data';
import SomeComponent from '/imports/ui/components/SomeComponent';
export default createContainer(() => {
return {
// pass props from here, to SomeComponent
}
}, SomeComponent);

Usage of Collection
Create a new file: '/imports/db/collection.js'
import { Mongo } from 'meteor/mongo';
export const PlayerStats = new Mongo.Collection('playerstats');
Update file: '/imports/api/methods.js'
Add => import { PlayerStats } from '../db/collection.js';
Remove => import { Mongo } from 'meteor/mongo';
const PlayerStats = new Mongo.Collection('playerstats');

Usage of publish
Create a new file: '/imports/api/publish.js'
import { Meteor } from 'meteor/meteor';
// import collection
import { PlayerStats } from '../db/collection.js';
Meteor.publish('players.list', function() {
return PlayerStats.find({});
});
Add in: '/imports/api/index.js'
import './publish';

Changes
In file: '/imports/ui/components/stats.jsx'.
import { createContainer } from 'meteor/react-meteor-data';
// import collection
import { PlayerStats } from '../../db/collection.js';
// some code
// remove default from this line
export default class Stats => export class Stats

Usage of subscribe
// adding container
export default createContainer(() => {
Meteor.subscribe('players.list');
const data = PlayerStats.find({}).fetch();
return {
// passing props from here, to Stats
data: data
}
}, Stats);

Usage of props
In file: '/imports/ui/components/stats.jsx',
find 'renderStats()'
Update => return this.state.playerData.map((stat, index) => (
To => return this.props.data.map((stat, index) => (
Check list page now.

Getting Reactive Data

More Related Content

What's hot

Similar to Getting Reactive Data

More from NodeXperts

Recently uploaded

Getting Reactive Data

Editor's Notes