Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
let BlogPostPage = React.createClass({
render() {
<div>
<SiteNavigation />
<MainContentArea>
{connectToStores({
posts: store => ({
post: store.getPost(this.props.postId),
nextPost: store.getPostAfter(this.props.postId)
})
}, ({ post }) => {
{/*
THE FUN PART! I can use this state however I want, even with multiple or nested elements.
Everything is explicit.
*/}
<div>
<BlogPost post={post} />
<NextPost post={nextPost} />
</div>
})}
</MainContentArea>
<SiteSidebar />
<SiteFooter />
</div>
}
});
Owner

gaearon commented Mar 11, 2015

If you feel more JSX-y:

let BlogPostPage = React.createClass({
  render() {
    <div>
      <SiteNavigation />
      <MainContentArea>
        <FluxComponent
          connectToStores={{
            posts: store => ({
              post: store.getPost(this.props.postId),
              nextPost: store.getPostAfter(this.props.postId)
            })
          }}
          render={({ post }) => {
            {/*
              THE FUN PART! I can use this state however I want, even with multiple or nested elements.
              Everything is explicit.
            */}
            <div>
              <BlogPost post={post} />
              <NextPost post={nextPost} />
            </div>
          }} />
      </MainContentArea>
      <SiteSidebar />
      <SiteFooter />
    </div>
  }
});

acdlite commented Mar 11, 2015

This is awesome. Only change I'd make off the top of my head is to pass props explicitly to state getters instead of autobinding, as discussed in acdlite/flummox#31.

connectToStores={{
  posts: (store, props) => ({
    post: store.getPost(props.postId),
    nextPost: store.getPostAfter(props.postId)
  })
}}
Owner

gaearon commented Mar 11, 2015

right, didn't realize this

acdlite commented Mar 11, 2015

Track progress here: acdlite/flummox#77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment