Functional “component wrapper” API. A variation on https://github.com/acdlite/flummox/blob/master/docs/why-flux-component-is-better-than-flux-mixin.md

example.jsx

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

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

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

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

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

right, didn't realize this

right, didn't realize this

Track progress here: acdlite/flummox#77

Track progress here: acdlite/flummox#77