Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
119 lines (98 sloc) 3.66 KB

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: