| 1 | # Fluxible
|
| 2 |
|
| 3 | [](http://badge.fury.io/js/fluxible)
|
| 4 | [](https://travis-ci.org/yahoo/fluxible)
|
| 5 | [](https://coveralls.io/r/yahoo/fluxible?branch=master)
|
| 6 | [](https://david-dm.org/yahoo/fluxible)
|
| 7 | [](https://david-dm.org/yahoo/fluxible#info=devDependencies)
|
| 8 |
|
| 9 | Pluggable, singleton-free container for isomorphic [Flux](https://github.com/facebook/flux) applications.
|
| 10 |
|
| 11 | ```bash
|
| 12 | $ npm install --save fluxible
|
| 13 | ```
|
| 14 |
|
| 15 | Join the #fluxible channel of the [Reactiflux](http://reactiflux.com) Slack community.
|
| 16 |
|
| 17 | [](https://gitter.im/yahoo/fluxible)
|
| 18 |
|
| 19 | ## Docs
|
| 20 |
|
| 21 | * [Quick Start](https://github.com/yahoo/fluxible/blob/master/docs/quick-start.md)
|
| 22 | * [API](https://github.com/yahoo/fluxible/blob/master/docs/api/README.md)
|
| 23 |
|
| 24 | ## Features
|
| 25 |
|
| 26 | * Singleton-free for server rendering
|
| 27 | * [Store](https://github.com/yahoo/fluxible/blob/master/docs/api/Stores.md) dehydration for client bootstrapping
|
| 28 | * Stateless async [actions](https://github.com/yahoo/fluxible/blob/master/docs/api/Actions.md)
|
| 29 | * Higher order [components](https://github.com/yahoo/fluxible/blob/master/docs/api/Components.md) for easy integration
|
| 30 | * Enforcement of Flux flow - restricted access to the [Flux interface](https://github.com/yahoo/fluxible/blob/master/docs/api/FluxibleContext.md) from within components
|
| 31 | * [Pluggable](https://github.com/yahoo/fluxible/blob/master/docs/api/Plugins.md) - add your own interfaces to the Flux context
|
| 32 | * Updated for React 0.13
|
| 33 |
|
| 34 | ## Extras
|
| 35 |
|
| 36 | * [Yeoman generator](https://github.com/yahoo/generator-fluxible)
|
| 37 | * [Example Applications](https://github.com/yahoo/flux-examples)
|
| 38 | * [Fluxible Routing](https://github.com/yahoo/fluxible-router)
|
| 39 | * [Isomorphic Data Services](https://github.com/yahoo/fluxible-plugin-fetchr)
|
| 40 |
|
| 41 | ## Usage
|
| 42 |
|
| 43 | ```js
|
| 44 | import Fluxible from 'fluxible';
|
| 45 | import React from 'react';
|
| 46 | import {connectToStores, createStore, provideContext} from 'fluxible/addons';
|
| 47 |
|
| 48 | // Action
|
| 49 | const action = (actionContext, payload) => {
|
| 50 | actionContext.dispatch('FOO_ACTION', payload);
|
| 51 | };
|
| 52 |
|
| 53 | // Store
|
| 54 | const FooStore = createStore({
|
| 55 | storeName: 'FooStore',
|
| 56 | handlers: {
|
| 57 | 'FOO_ACTION': 'fooHandler'
|
| 58 | },
|
| 59 | initialize: () => { // Set the initial state
|
| 60 | this.foo = null;
|
| 61 | },
|
| 62 | fooHandler: (payload) => {
|
| 63 | this.foo = payload;
|
| 64 | },
|
| 65 | getState: () => {
|
| 66 | return {
|
| 67 | foo: this.foo
|
| 68 | }
|
| 69 | }
|
| 70 | });
|
| 71 |
|
| 72 | // Component
|
| 73 | class App extends React.Component {
|
| 74 | render() {
|
| 75 | return <span>{this.props.foo}</span>
|
| 76 | }
|
| 77 | }
|
| 78 |
|
| 79 | App = provideContext(connectToStores(App, [FooStore], (stores, props) => {
|
| 80 | return stores.FooStore.getState();
|
| 81 | }));
|
| 82 |
|
| 83 | // App
|
| 84 | const app = new Fluxible({
|
| 85 | component: App,
|
| 86 | stores: [FooStore]
|
| 87 | });
|
| 88 |
|
| 89 | // Bootstrap
|
| 90 | const context = app.createContext();
|
| 91 | context.executeAction(action, 'bar', (err) => {
|
| 92 | console.log(React.renderToString(context.createElement()));
|
| 93 | });
|
| 94 | ```
|
| 95 |
|
| 96 | ## License
|
| 97 |
|
| 98 | This software is free to use under the Yahoo Inc. BSD license.
|
| 99 | See the [LICENSE file][] for license text and copyright information.
|
| 100 |
|
| 101 | [LICENSE file]: https://github.com/yahoo/fluxible/blob/master/LICENSE.md
|