You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

fluxible

Package Overview
Dependencies
3
Maintainers
5
Versions
53
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

fluxible

A pluggable container for isomorphic flux applications


Version published
Weekly downloads
1.8K
increased by122.97%
Maintainers
5
Created
Weekly downloads
 

Readme

Source

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.

Keywords

FAQs

Package last updated on 21 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc