Functional “component wrapper” API. A variation on https://github.com/acdlite/flummox/blob/master/docs/why-flux-component-is-better-than-flux-mixin.md
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> | |
} | |
}); |
This comment has been minimized.
This comment has been minimized.
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 comment has been minimized.
This comment has been minimized.
right, didn't realize this |
This comment has been minimized.
This comment has been minimized.
Track progress here: acdlite/flummox#77 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
If you feel more JSX-y: