docs/dist/flummox/docs/api/fluxcomponent/index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Flummox | Minimal, isomorphic Flux</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/flummox/css/app.min.css">
</head>
<body>
<div id="app"><div data-reactid=".2m9x1dcglc" data-react-checksum="613654263"><div style="height:2.25rem;" class="View" data-reactid=".2m9x1dcglc.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".2m9x1dcglc.0.0"><div class="View" data-reactid=".2m9x1dcglc.0.0.0"><div class="View" data-reactid=".2m9x1dcglc.0.0.0.0"><a href="/" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".2m9x1dcglc.0.0.1"><div class="View" data-reactid=".2m9x1dcglc.0.0.1.0"><a href="/flummox/docs/guides" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.0.0">Guides</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".2m9x1dcglc.0.0.1.0.1"><div class="View" data-reactid=".2m9x1dcglc.0.0.1.0.1.0"><a href="/flummox/docs/guides/quick-start" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.0.1.1"><a href="/flummox/docs/guides/react-integration" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.0.1.2"><a href="/flummox/docs/guides/why-flux-component-is-better-than-flux-mixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.0.1.2.0">Why FluxComponent > fluxMixin</a></div></div></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1"><a href="/flummox/docs/api" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.0">API</a><div class="View View--flexDirectionColumn" style="display:none;background-color:#2083E0;position:absolute;right:0;top:100%;width:16em;text-align:right;" data-reactid=".2m9x1dcglc.0.0.1.1.1"><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.0"><a href="/flummox/docs/api/store" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.1"><a href="/flummox/docs/api/flux" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.2"><a href="/flummox/docs/api/actions" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.3"><a href="/flummox/docs/api/fluxcomponent" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.4"><a href="/flummox/docs/api/higher-order-component" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.1.1.5"><a href="/flummox/docs/api/fluxmixin" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".2m9x1dcglc.0.0.1.2"><a href="https://github.com/acdlite/flummox" style="padding:0.375rem 0.75rem;color:#fff;width:100%;text-decoration:none;border:inherit solid 1px;border-width:;border-style:;" data-reactid=".2m9x1dcglc.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".2m9x1dcglc.1"><div data-reactid=".2m9x1dcglc.1.$=1$/flummox/docs/api/fluxcomponent"><article class="Doc" style="padding:3rem 0;" data-reactid=".2m9x1dcglc.1.$=1$/flummox/docs/api/fluxcomponent.0"><div class="Container" data-reactid=".2m9x1dcglc.1.$=1$/flummox/docs/api/fluxcomponent.0.0"><div class="Doc-content" data-reactid=".2m9x1dcglc.1.$=1$/flummox/docs/api/fluxcomponent.0.0.0"><h1><code>FluxComponent</code></h1>
<p><strong>In v3.0, FluxComponent requires React 0.13. If you’re still on React 0.12, keep using Flummox 2.x until you’re able to upgrade.</strong></p>
<p>Access the Flux instance and subscribe to store updates. Refer to the <a href="../guides/react-integration.md">React integration guide</a> for more information.</p>
<pre><code class="language-js"><FluxComponent connectToStores={{
posts: store => ({
post: store.getPost(this.props.post.id),
}),
comments: store => ({
comments: store.getCommentsForPost(this.props.post.id),
})
}}>
<InnerComponent />
</FluxComponent>
</code></pre>
<p>In general, <a href="../guides/why-flux-component-is-better-than-flux-mixin.md">it’s recommended to use FluxComponent instead of fluxMixin</a>.</p>
<h2>State getters</h2>
<p>The <code>stateGetter</code> prop can be used to control how state from stores are transformed into props:</p>
<pre><code class="language-js"><FluxComponent
connectToStores={['posts', 'session']}
stateGetter={([postStore, sessionStore]) => ({
posts: store.getPostForUser(sessionStore.getCurrentUserId())
})}
}}>
<InnerComponent />
</FluxComponent>
</code></pre>
<p>The <code>stateGetter</code> prop behaves differently depending on the value passed to the <code>connectToStores</code> prop, refer to <a href="fluxmixin.md">fluxMixin</a> for more details.</p>
<h2>Access flux with <code>this.props.flux</code></h2>
<p>In the child component, you can access the Flux instance with <code>this.props.flux</code>. For example, to perform an action:</p>
<pre><code class="language-js">onClick(e) {
e.preventDefault();
this.props.flux.getActions('actionsKey').someAction();
}
</code></pre>
<h2>Custom rendering</h2>
<p>With FluxComponent, state from your stores is automatically passed as props to its children. This is nice for simple cases, especially when there’s only a single child. But for more complex cases, or if you want direct control over rendering, you can pass a custom render function prop to FluxComponent:</p>
<pre><code class="language-js">// Using children
<FluxComponent connectToStores={{
posts: store => ({
post: store.getPost(this.props.postId),
})
}}>
<InnerComponent />
</FluxComponent>
// Using custom `render` function
<FluxComponent
connectToStores={{
posts: store => ({
post: store.getPost(this.props.postId),
})
}}
render={storeState => {
// Render whatever you want
return <InnerComponent {...storeState} />;
}}
/>
</code></pre>
<h2>Props</h2>
<h3><code>flux</code></h3>
<p>Indicates the <a href="flux.md">Flux instance</a> to be used. It will be added to the context of all its nested components. If unset, it’ll try to infer it from the context.</p>
<h3><code>connectToStores</code></h3>
<p>This prop has the same effect as passing the first argument to <a href="fluxmixin.md">fluxMixin</a>'s <code>connectToStores()</code>.</p>
<h3><code>stateGetter</code></h3>
<p>This prop has the same effect as passing the second argument to <a href="fluxmixin.md">fluxMixin</a>'s <code>connectToStores()</code>.</p>
<h3><code>render</code></h3>
<p>Optionally overrides the rendering function, useful to control what state is passed down as props to components.</p>
</div></div></article></div></span></div></div>
<script src="/flummox/js/app.min.js" defer></script>
</body>
</html>