-
-
Save mhodgson/a9e30e3acf4b552f7117 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Flux from 'path/to/flux.js' | |
window.MyApp.flux = new Flux() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Actions, Store, Flummox } from 'flummox'; | |
export default class Flux extends Flummox { | |
constructor() { | |
super(); | |
this.createActions('Widgets', require('path/to/widget_actions')); | |
this.createActions('Widgets', require('path/to/widget_store'), this); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require('react') | |
module.exports = React.createClass({ | |
// reactStuff | |
handleCreate: function(widget_data) { | |
// | |
// … but we can also use the response in the widget to do something afterward ("then") | |
// | |
const response = await MyApp.flux.getActions('Widgets').createWidget(widget_data) | |
if (response.status == 'success') { | |
this.closeThisComponent() | |
} else { | |
// do smething on fail | |
} | |
}, | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Actions } from 'flummox'; | |
var $ = require('jquery') // or some other ajax lib resource | |
export default class WidgetActions extends Actions { | |
// | |
// inspired by https://reactiflux.slack.com/archives/flummox/p1432075752001274 | |
// Using an async will dispatch the response to the store… | |
// | |
async createWidget(widget_data) { | |
let response; | |
await $.post('/api/widgets',widget_data).done((data,status) => { | |
response = { data, status } | |
}) | |
return await response | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Store } from 'flummox'; | |
export default class WidgetStore extends Store { | |
constructor(flux) { | |
super(); // Don't forget this step | |
const actions = flux.getActions('Widgets'); | |
this.register(actions.createWidget, this.handleCreate); | |
this.state = {}; | |
} | |
handleCreate(widget_data) { | |
// do something w/ your new widget delivered from the server via the action promise | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Webpack doesn't seem to like
await
used like this. Doesn'tawait
need to be within anasync
?