fluxible
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/fluxible package

    1.4.2 • Public • Published

    Fluxible

    NPM version

    Pluggable, singleton-free container for isomorphic Flux applications.

    $ npm install --save fluxible

    Join the #fluxible channel of the Reactiflux Discord community.

    Gitter chat

    Docs

    Features

    • Singleton-free for server rendering
    • Store dehydration for client bootstrapping
    • Stateless async actions
    • Higher order components for easy integration
    • Enforcement of Flux flow - restricted access to the Flux interface from within components
    • Pluggable - add your own interfaces to the Flux context
    • Updated for React 15

    Extras

    Usage

    import Fluxible from 'fluxible';
    import {createStore} from 'fluxible/addons';
    import {
        connectToStores,
        createElementWithContext,
        provideContext
    } from 'fluxible-addons-react';
    import React from 'react';
    import ReactDOM from 'react-dom/server';
    
    // Action
    const action = (actionContext, payload) => {
        actionContext.dispatch('FOO_ACTION', payload);
    };
    
    // Store
    const FooStore = createStore({
        storeName: 'FooStore',
        handlers: {
            'FOO_ACTION': 'fooHandler'
        },
        initialize: function () { // Set the initial state
            this.foo = null;
        },
        fooHandler: function (payload) {
            this.foo = payload;
        },
        getState: function () {
            return {
                foo: this.foo
            }
        }
    });
    
    // Component
    class App extends React.Component {
        render() {
            return <span>{this.props.foo}</span>
        }
    }
    
    App = provideContext(connectToStores(App, [FooStore], (context, props) => {
        return context.getStore(FooStore).getState();
    }));
    
    // App
    const app = new Fluxible({
        component: App,
        stores: [FooStore]
    });
    
    // Bootstrap
    const context = app.createContext();
    context.executeAction(action, 'bar', (err) => {
        console.log(ReactDOM.renderToString(createElementWithContext(context)));
    });

    Browser Compatibility

    Fluxible is written with ES2015 in mind and should be used along with polyfills for features like Promise and Object.assign in order to support all browsers. We recommend using Babel along with its polyfill.

    License

    This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.

    Install

    npm i fluxible

    Homepage

    fluxible.io/

    DownloadsWeekly Downloads

    1,978

    Version

    1.4.2

    License

    none

    Unpacked Size

    47.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • mridgway
    • snyamathi
    • lingyan
    • redonkulus
    • kfay