Instantly share code, notes, and snippets.

Embed
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>
}
});
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

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

This comment has been minimized.

Show comment
Hide comment
@acdlite

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

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Mar 11, 2015

right, didn't realize this

Owner

gaearon commented Mar 11, 2015

right, didn't realize this

@acdlite

This comment has been minimized.

Show comment
Hide comment
@acdlite

acdlite Mar 11, 2015

Track progress here: acdlite/flummox#77

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