Using Reactive Data with React and FlowRouter


#1

I really like the way data is handled in the advanced todos example app. I’ve created a walk-through of how to apply the container pattern used there, but with FlowRouter instead of React-Router.

The two main parts that are different is in how reactive data is passed into the route…

FlowRouter.route('/', {
  name: 'homepage',
  action() {
    mount(AppContainer, {
      content: (props) => <Homepage {...props} />
    })
  }
})

…and how regions are defined in a layout:

import React from 'react'

//This is the layout used by AppContainer.  We are passing in the entire props object, which includes both the route regions and the reactive data from the container
export const AppLayout = (props) => {

  //here, we are referencing the route region as a property of props, calling it, and then passing along the props object as an arg so that reactive data can be accessed by the component associated with this region in the route definition
	return (
		<div>{props.content(props)}</div>
	)
}

Check it out: http://coderchronicles.org/2016/04/15/using-data-in-meteor-with-react-and-flowrouter/
Would love to hear what people think.


#2

This is a great summary of how to get started! I’d love to include a link to this article, or maybe part of the content, in the React article in the guide!

Specifically, people have a big desire for improvements in that documentation:

Thanks for writing this post!


#3

Glad you liked it! +1 to more examples of how to use the react-meteor-data package.


#4

If you have a moment, I’d really appreciate a quick PR with a link.


#5

PR created: https://github.com/meteor/guide/pull/380


#6

Aaaaaaaaaaand merged!


#7

This was updated based on feedback from commenters.

Now, in the layout component used by FlowRouter, the entire props object is being passed in (rather than just the regions defined in the route), which also includes the reactive data, which in turn can be passed into the region itself as an argument.