A pluggable container for isomorphic flux applications
npm install fluxible
Pluggable, singleton-free container for isomorphic Flux applications.
``bash`
$ npm install --save fluxible
Join the #fluxible channel of the Reactiflux Discord community.
* Quick Start
* API
* 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
* Yeoman generator
* Example Applications
* Fluxible Routing
* Isomorphic Data Services
`js
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 {this.props.foo}
}
}
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)));
});
`
Fluxible is written with ES2015 in mind and should be used along with polyfills
for features like [Promise][Promise] and [Object.assign`][objectAssign]
in order to support all browsers. We recommend using [Babel][babel] along with
its [polyfill][polyfill].
This software is free to use under the Yahoo Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.
[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[objectAssign]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
[babel]: https://babeljs.io/
[polyfill]: https://babeljs.io/docs/usage/polyfill/
[LICENSE file]: https://github.com/yahoo/fluxible/blob/master/LICENSE.md