{this.state.post.title}
\n{this.state.post.content}
\n Flummox has three exports:
17 | 22 |If you’re using ES6 module syntax:
23 |import { Flux } from 'flummox';
24 | Or multiple classes at once:
26 |import { Flux, Store, Actions } from 'flummox';
27 | Flummox also comes with some addons. These are not part of the main export. That way, if you don’t use them, they won’t increase the size of your bundle.
30 |Refer to the React integration guide for details.
36 |import fluxMixin from 'flummox/mixin';
37 | import FluxComponent from 'flummox/component';
38 | import connectToStores from 'flummox/connect';
39 | ActionsCreate actions by extending from the base Actions class.
class MessageActions extends Actions {
18 |
19 | // Methods on the prototype are automatically converted into actions
20 | newMessage(content) {
21 |
22 | // The return value from the action is sent to the dispatcher.
23 | // It is also returned to the caller.
24 | return content;
25 | }
26 |
27 | // Asynchronous functions are also supported: just return a promise
28 | // This is easy using async-await
29 | async createMessage(messageContent) {
30 | const response = await serverCreateMessage(messageContent);
31 | return await response.json();
32 | }
33 |
34 | }
35 | You can also use a plain JavaScript object. When passed to flux.createActions, it will be converted into an Actions class.
// Same as previous example
38 | const MessageActions = {
39 | newMessage(content) {
40 | return content;
41 | },
42 |
43 | async createMessage(messageContent) {
44 | const response = await serverCreateMessage(messageContent);
45 | return await response.json();
46 | }
47 | }
48 | 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:
51 |// Using mocha and chai-as-promised
52 | const actions = new MessageActions();
53 |
54 | expect(actions.newMessage('Hello world!')).to.equal('Hello world');
55 |
56 | // Assuming `serverCreateMessage()` has been mocked
57 | expect(actions.createMessage('Hello world!')).to.eventually.deep.equal({
58 | id: 1,
59 | content: 'Hello world!',
60 | });
61 | 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 Store API for information on how to register handlers for asynchronous actions.
64 |object getActionIds()
67 | Returns an object of action ids, keyed by action name. (In most cases, it’s probably more convenient to use Flux#getActionIds() instead.)
Also available as getConstants()
ActionsCreate actions by extending from the base Actions class.
class MessageActions extends Actions {
18 |
19 | // Methods on the prototype are automatically converted into actions
20 | newMessage(content) {
21 |
22 | // The return value from the action is sent to the dispatcher.
23 | // It is also returned to the caller.
24 | return content;
25 | }
26 |
27 | // Asynchronous functions are also supported: just return a promise
28 | // This is easy using async-await
29 | async createMessage(messageContent) {
30 | const response = await serverCreateMessage(messageContent);
31 | return await response.json();
32 | }
33 |
34 | }
35 | You can also use a plain JavaScript object. When passed to flux.createActions, it will be converted into an Actions class.
// Same as previous example
38 | const MessageActions = {
39 | newMessage(content) {
40 | return content;
41 | },
42 |
43 | async createMessage(messageContent) {
44 | const response = await serverCreateMessage(messageContent);
45 | return await response.json();
46 | }
47 | }
48 | 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:
51 |// Using mocha and chai-as-promised
52 | const actions = new MessageActions();
53 |
54 | expect(actions.newMessage('Hello world!')).to.equal('Hello world');
55 |
56 | // Assuming `serverCreateMessage()` has been mocked
57 | expect(actions.createMessage('Hello world!')).to.eventually.deep.equal({
58 | id: 1,
59 | content: 'Hello world!',
60 | });
61 | 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 Store API for information on how to register handlers for asynchronous actions.
64 |object getActionIds()
67 | Returns an object of action ids, keyed by action name. (In most cases, it’s probably more convenient to use Flux#getActionIds() instead.)
Also available as getConstants()
Requires React 0.13. If you’re still on React 0.12, use FluxComponent instead.
17 |A higher-order component form of FluxComponent. Here’s an example from the Flummox documentation app:
18 |class HomeHandler extends React.Component {
19 | render() {
20 | const { doc } = this.props;
21 |
22 | if (!doc) return <span />;
23 |
24 | return <Doc doc={doc} />;
25 | }
26 | }
27 |
28 | HomeHandler = connectToStores(HomeHandler, {
29 | docs: store => ({
30 | doc: store.getDoc('index')
31 | })
32 | });
33 | Note: FluxComponent, fluxMixin, and the higher-order component implement the same interface. Eventually the docs will updated to make this clearer.
35 |Requires React 0.13. If you’re still on React 0.12, use FluxComponent instead.
17 |A higher-order component form of FluxComponent. Here’s an example from the Flummox documentation app:
18 |class HomeHandler extends React.Component {
19 | render() {
20 | const { doc } = this.props;
21 |
22 | if (!doc) return <span />;
23 |
24 | return <Doc doc={doc} />;
25 | }
26 | }
27 |
28 | HomeHandler = connectToStores(HomeHandler, {
29 | docs: store => ({
30 | doc: store.getDoc('index')
31 | })
32 | });
33 | Note: FluxComponent, fluxMixin, and the higher-order component implement the same interface. Eventually the docs will updated to make this clearer.
35 |Flummox has three exports:
17 | 22 |If you’re using ES6 module syntax:
23 |import { Flux } from 'flummox';
24 | Or multiple classes at once:
26 |import { Flux, Store, Actions } from 'flummox';
27 | Flummox also comes with some addons. These are not part of the main export. That way, if you don’t use them, they won’t increase the size of your bundle.
30 |Refer to the React integration guide for details.
36 |import fluxMixin from 'flummox/mixin';
37 | import FluxComponent from 'flummox/component';
38 | import connectToStores from 'flummox/connect';
39 |