An extended Flux implementation to build isomorphic javascript React app.
OTHER License
An extended Flux implementation to build isomorphic javascript React app.
All in one Starter
Everything in React
Minimal context APIs
To understand Flux, you only need to learn these APIs: this.executeAction()
, this.getStore()
, this.dispatch()
!
this.executeAction()
or this.getStore(name)
in components.this.dispatch()
or this.executeAction()
or this.getStore(name)
in actions.this.emitChange()
or this._get()
or this._set()
in stores.Read Start from Scratch to know how to create a fluxex application!
Prepare your project
npm init
npm install fluxex
Use the Starter template
node_modules/.bin/fluxex_starter
Start the Server
node_modules/.bin/gulp develop
FluxEx is context based flux implemention. Server side react rendering can be done easy when the flux is scoped under a request based context. Store and dispatcher are singletons in Facebook flux, but in fluxex they are not.
var myApp = require('fluxex').createApp({
product: require('./stores/product')
}, process.cwd() + '/components/Html.jsx');
// inside a component, requires Fluxex.mixin
...
onStoreChange: function () {
return this.getStore('myStore').getSomething();
},
handleClick: function () {
this.executeAction(myAction);
}
// myAction
var myAction = function (payload) {
... do your tasks ....
return this.dispatch('UPDATE_SOMETHING', ....); // this returns a promise
}
var myStore = {
// the dispatch will happened after these stores be dispatched
waitFor: {
UPDATE_SOMETHING: ['oneStore', 'anotherStore']
},
// handle this.dispatch('UPDATE_SOMETHING', ....)
handle_UPDATE_SOMETHING: function (payload) {
this._set('data', payload); // There are ._get() and ._set() in all stores
this.emitChange();
}
}
require('fluxex/extra/polyfill-ie8');
in your fluxexapp.js
to polyfill EventListener methods and XMLHttpRequest consts for IE8.catch
is reserved keyword in IE8, you need to replace somePromise.catch(...)
with somePromise['catch'](...)
for (... in ...)
will loop beyond properties in IE8, you need to replace for (I in myArray)
with myArray.forEach(function (V, I) { ...}
IE8 Unsupported features