Simple idiomatic flux helpers based on Facebook's Dispatcher.
npm install nutflux --save
- Creating constants that won't overlap, even with the same string value
var { createConstants } = require("nutflux");
var MyConstants = createConstants(
"HELLO_WORLD"
);
module.exports = MyConstants;
- Built in single
flux.Dispatcher
instance -Nutflux.AppDispatcher
var { AppDispatcher } = require("nutflux");
var MyConstants = require("./MyConstants");
AppDispatcher.dispatch({
actionType: MyConstants.HELLO_WORLD,
to: "Nutmeg"
});
- Handy
BaseStore
class:
var { BaseStore } = require("nutflux");
var React = require("react");
var baseStore = new BaseStore();
baseStore.registerWithDispatcher();
var TestContainer = React.createClass({
componentDidMount() {
baseStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
baseStore.removeChangeListener(this._onChange);
},
_onChange: function() {
console.log("CHANGED!");
},
});
baseStore.emitChange();
- Even handier
createStore
wrapper function- Use
initialize
function to set up initial state for the store - Use
mixins
in much the same way asReact.createClass
does. - Define
handlers
foractionTypes
declaratively.
- Use
var { createStore } = require("nutflux");
var MyConstants = require("./MyConstants");
var MyStoreMixin = require("./MyStoreMixin");
var HelloWorldStore = createStore({
mixins: [
MyStoreMixin
],
initialize: function() {
this.saidHello = false;
},
handlers: {
[MyConstants.HELLO_WORLD]: "helloWorld"
},
helloWorld() {
console.log("hello there!");
this.saidHello = true;
this.emitChange();
},
getHasSaidHello: function() {
return this.saidHello;
}
});
module.exports = HelloWorldStore;
- Even handier
createStoreListenMixin
lets us build a way of components listening to stores and setting state when those stores change.
var { createStoreListenMixin } = require("nutflux");
var React = require("react");
var HelloWorldStore = require("./HelloWorldStore");
var HelloWorldContainer = React.createClass({
mixins: [
createStoreListenMixin(HelloWorldStore)
],
getStateFromStores() {
return {
hasSaidHello: return HelloWorldStore.getHasSaidHello()
}
},
});
module.exports = HelloWorldContainer;
createPureClass(obj)
simplifies using PureRenderMixin - it adds PureRenderMixinobj.mixins
and passes obj toReact.createClass()