nutflux

3.1.2 • Public • Published

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()

Readme

Keywords

Package Sidebar

Install

npm i nutflux

Weekly Downloads

9

Version

3.1.2

License

MIT

Last publish

Collaborators

  • editd