docs/dist/flummox/docs/api/fluxmixin/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=".20t5vlw7cow" data-react-checksum="-376475840"><div style="height:2.25rem;" class="View" data-reactid=".20t5vlw7cow.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".20t5vlw7cow.0.0"><div class="View" data-reactid=".20t5vlw7cow.0.0.0"><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".20t5vlw7cow.0.0.1"><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.0.1"><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.0.1.2.0">Why FluxComponent > fluxMixin</a></div></div></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1"><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".20t5vlw7cow.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=".20t5vlw7cow.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".20t5vlw7cow.1"><div data-reactid=".20t5vlw7cow.1.$=1$/flummox/docs/api/fluxmixin"><article class="Doc" style="padding:3rem 0;" data-reactid=".20t5vlw7cow.1.$=1$/flummox/docs/api/fluxmixin.0"><div class="Container" data-reactid=".20t5vlw7cow.1.$=1$/flummox/docs/api/fluxmixin.0.0"><div class="Doc-content" data-reactid=".20t5vlw7cow.1.$=1$/flummox/docs/api/fluxmixin.0.0.0"><h1><code>fluxMixin</code></h1>
<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>
<p>Note that fluxMixin is actually a function that returns a mixin, as the example below shows. The parameters are the same as those for <code>connectToStores()</code>, described below. On component initialization, <code>connectToStores()</code> is called and used to set the initial state of the component.</p>
<pre><code class="language-js">import fluxMixin from 'flummox/mixin';
let MyComponent = React.createClass({
mixins[fluxMixin(['storeA', 'storeB'])],
...
});
</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>When connecting to stores with fluxMixin (and FluxComponent), you’ll usually want to specify custom state getters.</p>
<p>A state getter is a function which returns a state object for a given store. The state object is merged into the component state using <code>setState()</code>.</p>
<p>The default state getter returns the entire store state. You can specify null as a state getter to use the default state getter.</p>
<p>Here’s an example of a state getter map you would pass to either <code>fluxMixin()</code> or <code>connectToStores()</code>. The keys are store keys, and the values are state getter functions.</p>
<pre><code class="language-js">fluxMixin({
posts: (store, props) =>({
storeA: store.getPost(props.post.id),
}),
comments: (store, props) => ({
comments: store.getCommentsForPost(props.post.id),
})
});
</code></pre>
<p>In some situations the data retrieved from one store depends on the state from another, you can use an array of store keys with a custom state getter to ensure the components state is updated when either store changes:</p>
<pre><code class="language-js">fluxMixin(
['posts', 'session'],
// An array of store instances are passed to the state getter; Instead of indexing
// into the stores array, ES6 array destructuring is used to access each store
// as a variable.
([postStore, sessionStore]) => ({
posts: store.getPostForUser(sessionStore.getCurrentUserId())
})
);
</code></pre>
<h2>Access flux with <code>this.flux</code></h2>
<p>You can access the Flux instance with <code>this.flux</code>. For example, to perform an action:</p>
<pre><code class="language-js">onClick(e) {
e.preventDefault();
this.flux.getActions('actionsKey').someAction();
}
</code></pre>
<h2>Methods</h2>
<h3>connectToStores</h3>
<pre><code class="language-js">connectToStores(string storeKey [, function stateGetter])
connectToStores(Array<string> storeKeys [, function stateGetter])
connectToStores(object stateGetterMap [, function stateGetter])
</code></pre>
<p>Synchronize component state with state from Flux stores. Pass a single store key, an array of store keys, or a map of store keys to getter functions. You can also specify a custom state getter as the second argument, the default state getter will return the entire store state (a reduce is performed on the entire store state when using an array or store keys).</p>
<p>When using an array of store keys, the custom state getter is called with an array of store instances (same order as keys) as the first argument; An array is used instead of separate arguments to allow for future versions of flummox to pass additional arguments to the stateGetter eg. <code>props</code>.</p>
<p>Otherwise only a single store instance is passed to the custom state getter.</p>
<p>Returns the initial combined state of the specified stores.</p>
<p><strong>Usage note</strong>: Generally, you should avoid calling this directly and instead pass arguments to <code>fluxMixin()</code>, which calls this internally.</p>
<h3>getStoreState</h3>
<pre><code>getStoreState()
</code></pre>
<p>Returns current combined state of connected stores.</p>
</div></div></article></div></span></div></div>
<script src="/flummox/js/app.min.js" defer></script>
</body>
</html>