Skip to content

Instantly share code, notes, and snippets.

@gaearon
Created March 11, 2015 10:52
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gaearon/b0c060edf413fe23db0a to your computer and use it in GitHub Desktop.
Save gaearon/b0c060edf413fe23db0a to your computer and use it in GitHub Desktop.
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>
}
});
@gaearon
Copy link
Author

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
Copy link

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)
  })
}}

@gaearon
Copy link
Author

gaearon commented Mar 11, 2015

right, didn't realize this

@acdlite
Copy link

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