Edit on Github

API: Plugins #

Plugins allow you to extend the interface of each context type.

Creating Plugins #

Here, we'll give components access to the getFoo() function:

import Fluxible from 'fluxible';
let app = new Fluxible();

app.plug({
    // Required unique name property
    name: 'TestPlugin',
    
    /**
     * Called after context creation to dynamically create a context plugin
     * @method plugContext
     * @param {Object} options Options passed into createContext
     * @param {Object} context FluxibleContext instance
     * @param {Object} app Fluxible instance
     */
    plugContext: function (options, context, app) {
        // `options` is the same as what is passed into `Fluxible.createContext(options)`
        let foo = options.foo;
        
        // Returns a context plugin
        return {
            /**
             * Method called to allow modification of the component context
             * @method plugComponentContext
             * @param {Object} componentContext ComponentContext instance
             * @param {Object} context FluxibleContext instance
             * @param {Object} app Fluxible instance
             */
            plugComponentContext: function (componentContext, context, app) {
                componentContext.getFoo = function () {
                    return foo;
                };
            },
            //plugActionContext: function (actionContext, context, app) {}
            //plugStoreContext: function (storeContext, context, app) {}

            /**
             * Allows context plugin settings to be persisted between server and client. Called on server
             * to send data down to the client
             * @method dehydrate
             */
            dehydrate: function () {
                return {
                    foo: foo
                };
            },

            /**
             * Called on client to rehydrate the context plugin settings
             * @method rehydrate
             * @param {Object} state Object to rehydrate state
             */
            rehydrate: function (state) {
                foo = state.foo;
            }
        };
    },

    /**
     * Allows dehydration of application plugin settings
     * @method dehydrate
     */
    dehydrate: function () { return {}; },

    /**
     * Allows rehydration of application plugin settings
     * @method rehydrate
     * @param {Object} state Object to rehydrate state
     */
    rehydrate: function (state) {}
});

// set a value for it
let context = app.createContext({
    foo: 'bar'
});

// retrieve it from actions, stores or components
context.getActionContext().getFoo(); // returns 'bar'
context.getStoreContext().getFoo(); // returns 'bar'
context.getComponentContext().getFoo(); // returns 'bar'
// or this.context.getFoo() from a React component, read the note below

componentContext #

To leverage the new context value in componentContext, provideContext has an option for passing custom contextTypes which will ensure that it is made available to all children.

// create the React component as usual
class Application extends React.Component {
    static contextTypes = {
      getFoo: React.PropTypes.func
    }
    
    render() {
        ...
    }
}

// pass in the "foo" context type to register it with React context
Application = provideContext(Application, {
    getFoo: React.PropTypes.func
});

Example plugins: