in Tutorials

Using Data in Meteor with React and FlowRouter

Update: Two commenters pointed out errors in my code that prevented reactive data from properly being passed into the route-specific component.  Thanks Alex and Robin!  This has now been fixed. The main change is in how data is passed into the page. I’ve also included Meteor’s Accounts UI in the repo, so that you can actually see the reactive data update based on if you are signed in or not.

There are many ways to bring reactive data into React components in a Meteor app.  Sacha Greif lists four techniques and Josh Owens posted about it on the Meteor Forums.

My current favorite, when using React and FlowRouter, is based on the react branch of Meteor’s advanced Todos example app, in combination with some of my own tweaks when using FlowRouter. (That branch uses React-Router.)

Here’s a walk-through of that approach.  Just want the code?  Here’s the GitHub repo.

0. Start Here

The starting point for this tutorial is this getting started tutorial. Please check that out before continuing.

1. Install packages

For this approach, we need to install two packages.  First, we need the react-meteor-data package, which we install with Meteor:

meteor add react-meteor-data 

We also need the react-addons-pure-render-mixin, which we install using npm:

npm i react-addons-pure-render-mixin --save

After installing these packages, you may need to re-start your Meteor server.

2. Add some data to work with

We need some reactive data to work with.  Let’s use Meteor’s accounts-password package, which gives us a Meteor.user() method which returns the current user record, if found, or returns null if no user is signed in.

To allow for testing this reactive data source, we’ll add the same accounts ui wrapper found in Meteor’s own React tutorial for adding an accounts ui.

First, install the accounts packages we’ll need:

meteor add accounts-password accounts-ui

Next, add the following component (copied from here):

/imports/ui/accounts/accounts_ui_wrapper.jsx

3. Add a data container

The container pattern is gaining increasingly widespread use among React developers.  This is the best explanation I’ve seen of what a container does:

A container does data fetching and then renders its corresponding sub-component. That’s it.

From Container Components.

Here, we’ll create an app-level container.  In my opinion, this is the right place to be handling user data. Once we have reactive access to this data, we can pass it down to child components.

/imports/ui/containers/app_container.js

Here, we created a simple data container using the createContainer() method provided by the react-meteor-data package.  Our only reactive data source here is Meteor.user(), which returns null if no user is signed in. We are using it to return a  isSignedIn boolean that returns true if a user is signed in.

Also note the use of the ES6 object property shorthand.  By just writing  signedIn, this is the same as if we would have written signedIn : signedIn.

4. Pass data into a route region

To allow for passing props into a route-specific component, we need to update both how we define our routes and how they are rendered.

Make the following updates to your routes file:

/imports/startup/routes.jsx

First, remove the App import and instead import the container we just created.

Note that we are not enclosing this object in curly braces when importing.  This is because it was exported using export default.  It also allows us to name it on import.  We could call this BaconContainer if we wanted.

Next, in the same file, update your route definition:

Here we are passing data via props from the AppContainer into the homepage.  Note that the content param now is a function.  Additionally, we are passing in the data from AppContainer via the props argument and then transferring them into the component using the JSX spread attribute, which passes along all props from the parent component.

5. Pass reactive data into the page

Update: this was corrected based on user comments,

Here we are passing in the props from our route into our layout file.  In contrast to what is described in the react-mounter docs, in which we would pass in only props corresponding to the regions defined in our routes, eg { region1, region2 }  we are instead passing in the entire props object, which will include the regions and our reactive data.

This, in turn means that we will reference regions via the props object.  Additionally, to make reactive data available to the component associated with a given region, we pass along the props object as an argument.

Finally, we are including our AccountsUIWrapper component to allow for testing of our reactive data.

imports/ui/layouts/app_layout.jsx

 

6. Use the reactive data on a page

Finally, let’s actually use our reactive data source on a page. Let’s display a different message depending on if a user is signed in or not on the homepage.

/imports/ui/pages/homepage.jsx

Here, we made several updates to our Homepage component.

First, we pass in any props transferred to this component as a props argument.  Next, we define a  signedInMsg that is based on our reactive data source and returns a different message depending on if signedIn is true or false.  Finally, we render our message.

If you try signing in or out, you’ll see that the message updates accordingly.

I hope you found this useful.  If you liked it, please let me know in the comments and/or tweet about it. Also, if you found any errors, definitely let me know in the comments.

Add a Comment

Comment

  1. What’s Going down i am new to this, I stumbled upon this I have found It absolutely helpful and it
    has helped me out loads. I’m hoping to contribute & help different users like its helped me.
    Good job.

  2. Thanks for this tutorial. I cloned the repo, added a user and logged in to test the logic. It appears that the isLoggedIn boolean is not being passed into the Homepage component. The condition will always be false since props.isLoggedIn is undefined and not the isLoggedIn boolean.

    • Thanks for pointing this out! I’ve made the necessary corrections, such that reactive data now is properly being passed through. I also added Meteor’s accounts-ui to allow for testing it.

      • Thanks! Really great tutorial for getting up to speed with all of the changes in Meteor World. Much appreciated!

  3. You import AppContainer in file routes but in ui/app_container export createContainer function. Could you explain it ? Thank you.

Webmentions

  • Build a Simple Note-taking App with Meteor and React – Coder Chronicles May 6, 2016

    Thanks for noticing! I’ve updated the repo and now it should work properly.

  • Getting Started with Meteor 1.3, React 15, and FlowRouter – Coder Chronicles May 6, 2016

    Thanks for noticing! I’ve updated the repo and now it should work properly.