docs/dist/flummox/docs/api/actions/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=".x6smgun6rk" data-react-checksum="2077448756"><div style="height:2.25rem;" class="View" data-reactid=".x6smgun6rk.0"><div class="View" style="background-color:#2083E0;position:fixed;width:100%;z-index:9999;" data-reactid=".x6smgun6rk.0.0"><div class="View" data-reactid=".x6smgun6rk.0.0.0"><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.0.0.0">Flummox</a></div></div><div class="View View--justifyContentFlexEnd View--flexGrow" data-reactid=".x6smgun6rk.0.0.1"><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.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=".x6smgun6rk.0.0.1.0.1"><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.0.1.0.0">Quick Start</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.0.1.1.0">React Integration</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.0.1.2.0">Why FluxComponent > fluxMixin</a></div></div></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1"><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.0.0">Store</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.1.0">Flux</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.2.0">Actions</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.3.0">FluxComponent</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.4.0">Higher-order component</a></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.1.1.5.0">fluxMixin</a></div></div></div><div class="View" data-reactid=".x6smgun6rk.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=".x6smgun6rk.0.0.1.2.0">GitHub</a></div></div></div></div><span data-reactid=".x6smgun6rk.1"><div data-reactid=".x6smgun6rk.1.$=1$/flummox/docs/api/actions"><article class="Doc" style="padding:3rem 0;" data-reactid=".x6smgun6rk.1.$=1$/flummox/docs/api/actions.0"><div class="Container" data-reactid=".x6smgun6rk.1.$=1$/flummox/docs/api/actions.0.0"><div class="Doc-content" data-reactid=".x6smgun6rk.1.$=1$/flummox/docs/api/actions.0.0.0"><h1><code>Actions</code></h1>
<p>Create actions by extending from the base <code>Actions</code> class.</p>
<pre><code class="language-js">class MessageActions extends Actions {
// Methods on the prototype are automatically converted into actions
newMessage(content) {
// The return value from the action is sent to the dispatcher.
// It is also returned to the caller.
return content;
}
// Asynchronous functions are also supported: just return a promise
// This is easy using async-await
async createMessage(messageContent) {
const response = await serverCreateMessage(messageContent);
return await response.json();
}
}
</code></pre>
<p>You can also use a plain JavaScript object. When passed to <code>flux.createActions</code>, it will be converted into an Actions class.</p>
<pre><code class="language-js">// Same as previous example
const MessageActions = {
newMessage(content) {
return content;
},
async createMessage(messageContent) {
const response = await serverCreateMessage(messageContent);
return await response.json();
}
}
</code></pre>
<h2>Testing</h2>
<p>The return value of an action is dispatched automatically. It’s also returned to the caller. This means it’s possible to test actions completely independently from a Flux or Store instance. Here’s how you’d test the example MessageActions from above:</p>
<pre><code class="language-js">// Using mocha and chai-as-promised
const actions = new MessageActions();
expect(actions.newMessage('Hello world!')).to.equal('Hello world');
// Assuming `serverCreateMessage()` has been mocked
expect(actions.createMessage('Hello world!')).to.eventually.deep.equal({
id: 1,
content: 'Hello world!',
});
</code></pre>
<h2>Asynchronous actions</h2>
<p>Asynchronous actions are actions that return promises. Unlike synchronous actions, async actions fire the dispatcher twice: at the beginning and at the end of the action. Refer to the <a href="store.md">Store API</a> for information on how to register handlers for asynchronous actions.</p>
<h2>Methods</h2>
<h3>getActionIds</h3>
<pre><code class="language-js">object getActionIds()
</code></pre>
<p>Returns an object of action ids, keyed by action name. (In most cases, it’s probably more convenient to use <code>Flux#getActionIds()</code> instead.)</p>
<p>Also available as <code>getConstants()</code></p>
</div></div></article></div></span></div></div>
<script src="/flummox/js/app.min.js" defer></script>
</body>
</html>