docs/dist/flummox/docs/api/flux.md/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=".1us5yyha1og" data-react-checksum="-722883036"><div style="height:2.25rem;" class="View" data-reactid=".1us5yyha1og.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".1us5yyha1og.0.0"><div class="View" data-reactid=".1us5yyha1og.0.0.0"><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".1us5yyha1og.0.0.1"><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.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=".1us5yyha1og.0.0.1.0.1"><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.0.1.2.0">Why FluxComponent > fluxMixin</a></div></div></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1"><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".1us5yyha1og.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=".1us5yyha1og.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".1us5yyha1og.1"><div data-reactid=".1us5yyha1og.1.$=1$/flummox/docs/api/flux"><article class="Doc" style="padding:3rem 0;" data-reactid=".1us5yyha1og.1.$=1$/flummox/docs/api/flux.0"><div class="Container" data-reactid=".1us5yyha1og.1.$=1$/flummox/docs/api/flux.0.0"><div class="Doc-content" data-reactid=".1us5yyha1og.1.$=1$/flummox/docs/api/flux.0.0.0"><h1><code>Flux</code></h1>
<p>Create Flux containers by extending from the base <code>Flux</code> (or <code>Flummox</code>) class.</p>
<pre><code class="language-js">class Flux extends Flummox {
constructor() {
super();
// Create actions first so our store can reference them in
// its constructor
this.createActions('messages', MessageActions);
// Extra arguments are sent to the store's constructor. Here, we're
// passing a reference to this Flux instance
this.createStore('messages', MessageStore, this);
}
}
</code></pre>
<h2>Encapsulate your stores and actions</h2>
<p>Flummox is designed to be used without singletons. Instead, create a Flux class that encapsulates the creation of all your application’s stores and actions, so that you can create new instances on the fly.</p>
<pre><code class="language-js">const flux = new Flux();
</code></pre>
<p>(Note that there’s nothing technically stopping you from using singletons if you wish, but why would you want to?)</p>
<h2>Debugging</h2>
<p>Like Stores, Flux instances are EventEmitters. A <code>dispatch</code> event is emitted on every dispatch. Listeners are sent the dispatched payload. This can be used during development for debugging.</p>
<pre><code class="language-js">flux.addListener('dispatch', payload => {
console.log('Dispatch: ', payload);
});
</code></pre>
<p>Additionally, an <code>error</code> event is emitted when errors occur as a result of an async action. This is both for convenience and to prevent error gobbling.</p>
<h2>Methods</h2>
<h3>createActions</h3>
<pre><code class="language-js">Actions createActions(string key, function ActionsClass [, ...constructorArgs])
</code></pre>
<p>Creates an instance of <code>ActionsClass</code> and saves a reference to it. <code>constructorArgs</code> are passed to the constructor of <code>ActionsClass</code> on creation.</p>
<h3>createStore</h3>
<pre><code class="language-js">Store createStore(string key, function StoreClass [, ...constructorArgs])
</code></pre>
<p>Creates an instance of <code>StoreClass</code>, registers the store’s handlers with the dispatcher, and saves a reference to it. <code>constructorArgs</code> are passed to the constructor of <code>ActionsClass</code> on creation.</p>
<h3>getStore</h3>
<pre><code class="language-js">Store getStore(string key)
</code></pre>
<p>Gets an store instance by key.</p>
<h3>removeStore</h3>
<pre><code class="language-js">Store removeStore(string key)
</code></pre>
<p>Deletes an instance of <code>StoreClass</code>, unregisters the store’s handlers from dispatcher, and removes all store listeners.</p>
<h3>getActions</h3>
<pre><code class="language-js">Actions getActions(string key)
</code></pre>
<p>Gets an actions instance by key.</p>
<h3>getActionIds</h3>
<pre><code class="language-js">Actions getActionIds(string key)
</code></pre>
<p>Gets action ids for the given actions key. Internally calls <code>Actions#getActionIds</code>.</p>
<p>Also available as <code>getConstants()</code>.</p>
<h3>removeActions</h3>
<pre><code class="language-js">Actions removeActions(string key)
</code></pre>
<p>Deletes an actions instance by key.</p>
<h2>Dispatcher methods</h2>
<p>Every Flux instance has its own dispatcher. You should try to avoid interacting with the dispatcher directly, but it is available (primarily for testing purposes) as <code>this.dispatcher</code>. Some convenience methods are also provided:</p>
<h3>dispatch</h3>
<pre><code>dispatch(string actionId [, * body])
</code></pre>
<p>Similar to the <code>dispatch()</code> method of the dispatcher itself, except instead of passing a payload, the payload is constructed for you, in the form:</p>
<pre><code class="language-js">{
actionId,
body
}
</code></pre>
<p>This is used internally by Flummox: the <code>actionId</code> field is used to identify the source action, and <code>body</code> contains the value passed to store handlers. In your tests, you can use it to simulate a dispatch to your stores.</p>
<h3>waitFor</h3>
<pre><code>waitFor(Store store)
</code></pre>
<p>Similar to the <code>waitFor()</code> method of the dispatcher itself, this can be used within a handler to wait for a different store to respond to the dispatcher before continuing. The operation is synchronous.</p>
<p>Instead of passing a store, you can also pass a dispatcher token, or an array of tokens and stores.</p>
<h2>Using a custom dispatcher</h2>
<p><strong>tl;dr</strong> Flummox uses the flux dispatcher from Facebook, but you can switch out whatever api compatible dispatcher you want.</p>
<hr>
<p>Usually the dispatcher provided by Facebook is sufficient, but you aren’t limited to using it if you find you need more than it provides. If you want to have custom behavior when dispatching actions, you can provide a wrapper for the Facebook dispatcher that does what you want. Or use something else entirely. It’s up to you.</p>
<p>To substitute a different dispatcher object just change the <code>constructor()</code> function of your flux object like this:</p>
<pre><code class="language-js">
class Flux extends Flummox {
constructor() {
super();
this.dispatcher = new MyCustomDispatcher();
}
}
</code></pre>
<p>Just remember, whatever object you provide has to follow the same api as the dispatcher from Facebook. The easiest way to do that is to extend the Facebook dispatcher in a new class, and then provide whatever alternate or extended functionality you desire.</p>
<p>For instance, say you want to allow the dispatcher to receive actions for dispatching while it is in the middle of another action dispatch. The standard dispatcher will complain that you cannot dispatch an action during another action. There are good reasons for this, but perhaps you just want to queue up that action and have it execute when the current action is completed. One easy way to do this would be to use <code>setTimeout()</code>. To do this you would provide a dispatcher with slightly different dispatch functionality, like this:</p>
<pre><code class="language-js">
class MyCustomDispatcher extends Dispatcher {
dispatch(...args) {
if (!this.isDispatching()) {
super.dispatch(...args); // This will execute the Facebook dispatcher's dispatch function.
} else {
setTimeout(() => { // We are currently dispatching, so delay this action using setTimeout
super.dispatch(...args);
}, 0);
}
}
}
</code></pre>
<h2>Serialization/deserialization</h2>
<p>If you’re building an isomorphic application, it’s often a good idea pass the initial state of your application from the server to the client to avoid unecessary/duplicate HTTP requests. This is easy with Flux, since all of your application state is located in your stores.</p>
<p>This feature is opt-in on a store-by-store basis, and requires some additional set-up.</p>
<h3>serialize</h3>
<pre><code>string serialize()
</code></pre>
<p>Returns a serialized string describing the entire state of your Flux application.</p>
<p>Internally, it passes each store’s current state to the store’s static method <code>Store.serialize()</code>. The return value must be a string representing the given state. If a store does not have a static method <code>serialize()</code>, or if it returns a non-string, it is ignored.</p>
<h3>deserialize</h3>
<pre><code>deserialize(string stateString)
</code></pre>
<p>Converts a serialized state string (as returned from <code>Flux#serialize()</code>) to application state and updates the stores.</p>
<p>Internally, it passes the state string for each store (as returned from <code>Store.serialize()</code>) to the store’s static method <code>Store.deserialize()</code>. The return value must be a state object. It will be passed to <code>Store#replaceState()</code>. If a store does not have a static method <code>deserialize()</code>, it is ignored.</p>
</div></div></article></div></span></div></div>
<script src="/flummox/js/app.min.js" defer></script>
</body>
</html>