3.1.2 • Published 10 years ago

nutflux v3.1.2

Weekly downloads
2
License
MIT
Repository
github
Last release
10 years ago

Nutflux

Simple idiomatic flux helpers based on Facebook's Dispatcher.

Installation

npm install nutflux --save

Usage

  • 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 as React.createClass does.
    • Define handlers for actionTypes declaratively.
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 PureRenderMixin obj.mixins and passes obj to React.createClass()
3.1.2

10 years ago

3.1.1

10 years ago

3.1.0

10 years ago

3.0.2

10 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.0.0

10 years ago

2.1.0

10 years ago

1.1.0

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago