React.js: Access Overall App State from a Standalone Component

Question

I have a Component that is not owned by any other Component. The page will jump to it when a user clicks a link, which is implemented with react-router.

<Link to={`/weather-stations/${this.props.active_device}`} >view detail
</Link>

And I cannot find a way to pass the state of the app to that Component, like: <ComponentName data={ this.state }/> I wonder what is the recommended way to do this in React? Thanks.

Answer 1

The "official" (ie used by Facebook) way of doing this is via the Flux architecture as described here: https://facebook.github.io/flux/docs/overview.html

Essentially, this involves the creation of "Stores" which hold the data which is then accessed and displayed by your React components. In your example, you might create a WeatherStationDataStore , keyed on the active_device ID - the component at the other end of that link can pick up the ID from the URL and dispatch an "Action" that calls WeatherStationDataStore.get(id) - if there's any server interaction needed to get the data it can be abstracted via the store.

The standard "to do list" example for Flux can be found here: https://facebook.github.io/flux/docs/todo-list.html and is a good introduction to the concepts.

Answer 2

Try this -

In linking component -

<Link to={`/weather-stations/${this.props.active_device}`} state={{"foo":"bar"}} >view detail
</Link>

And in the linked Component

var data = this.props.location.state;
//doSomethingWithData(data.foo);