<commit_before># fluxible-app
[![Build Status](https://travis-ci.org/yahoo/fluxible-app.svg?branch=master)](https://travis-ci.org/yahoo/fluxible-app) [![Dependency Status](https://david-dm.org/yahoo/fluxible-app.svg)](https://david-dm.org/yahoo/fluxible-app) [![Coverage Status](https://coveralls.io/repos/yahoo/fluxible-app/badge.png?branch=master)](https://coveralls.io/r/yahoo/fluxible-app?branch=master)

fluxible-app is a pluggable container for isomorphic [flux](https://github.com/facebook/flux) applications that provides interfaces that are common throughout the Flux architecture and restricts usage of these APIs to only the parts that need them to enforce the unidirectional flow.

## Install

`npm install --save fluxible-app`

## Usage

```js
var AppComponent = require('./components/Application.jsx'); // Top level React component
var FluxibleApp = require('fluxible-app');
var app = new FluxibleApp();

// Per request/session
var context = app.createContext();
var loadPageAction = require('./actions/loadPage');
context.executeAction(loadPageAction, {/*payload*/}, function (err) {
    if (err) throw err;
    var component = AppComponent({
        // Allow the component to access only certain methods of this session context
        context: context.getComponentContext();
    });

    var appState = app.dehydrate(context);

    // Use react to render the component
    // Expose appState to the client
});
```

<!-- wait til it's been updated
For a more extensive example of usage both on the server and the client, see [flux-examples](https://github.com/yahoo/flux-examples).
-->

### Dehydration/Rehydration

fluxible-app uses reserved methods throughout called `rehydrate` and `dehydrate` which are responsible for taking a snapshot of server-side state so that it can be sent to the browser and rehydrated back to the same state in the browser. This naming scheme also extends to [dispatchr](https://github.com/yahoo/dispatchr) which takes care of dehydrating/rehydrating the store instances.

There are two kinds of state within fluxible-app:

 * **Application State**: Settings and data that are registered on server start
 * **Context State**: Settings and data that are created per context/request

Application level rehydrate method is allowed asynchronous operation in case it needs to load JavaScript or data on demand.

### Context Types

Within a context, fluxible-app creates interfaces providing access to only certain parts of the system. These are broken down as such:

 * **Action Context**: interface accessible by action creator methods. Passed as first parameter to all action creators.
 * **Component Context**: interface accessible by React components. Should be passed as prop to top level React component and then propagated to child components that require acess to it.
 * **Store Context**: interface accessible by stores. Passed as first parameter to all stores. See [dispatchr docs](https://github.com/yahoo/dispatchr#constructor-1)

### Creating Plugins

Plugins allow you to extend the interface of each context type. Here, we'll give components access to the `getFoo()` function:

```js
var FluxibleApp = require('fluxible-app');
var app = new FluxibleApp();<commit_msg>Reference flux-examples<commit_after># fluxible-app
[![Build Status](https://travis-ci.org/yahoo/fluxible-app.svg?branch=master)](https://travis-ci.org/yahoo/fluxible-app) [![Dependency Status](https://david-dm.org/yahoo/fluxible-app.svg)](https://david-dm.org/yahoo/fluxible-app) [![Coverage Status](https://coveralls.io/repos/yahoo/fluxible-app/badge.png?branch=master)](https://coveralls.io/r/yahoo/fluxible-app?branch=master)

fluxible-app is a pluggable container for isomorphic [flux](https://github.com/facebook/flux) applications that provides interfaces that are common throughout the Flux architecture and restricts usage of these APIs to only the parts that need them to enforce the unidirectional flow.

## Install

`npm install --save fluxible-app`

## Usage

```js
var AppComponent = require('./components/Application.jsx'); // Top level React component
var FluxibleApp = require('fluxible-app');
var app = new FluxibleApp();

// Per request/session
var context = app.createContext();
var loadPageAction = require('./actions/loadPage');
context.executeAction(loadPageAction, {/*payload*/}, function (err) {
    if (err) throw err;
    var component = AppComponent({
        // Allow the component to access only certain methods of this session context
        context: context.getComponentContext();
    });

    var appState = app.dehydrate(context);

    // Use react to render the component
    // Expose appState to the client
});
```

For a more extensive example of usage both on the server and the client, see [flux-examples](https://github.com/yahoo/flux-examples).

### Dehydration/Rehydration

fluxible-app uses reserved methods throughout called `rehydrate` and `dehydrate` which are responsible for taking a snapshot of server-side state so that it can be sent to the browser and rehydrated back to the same state in the browser. This naming scheme also extends to [dispatchr](https://github.com/yahoo/dispatchr) which takes care of dehydrating/rehydrating the store instances.

There are two kinds of state within fluxible-app:

 * **Application State**: Settings and data that are registered on server start
 * **Context State**: Settings and data that are created per context/request

Application level rehydrate method is allowed asynchronous operation in case it needs to load JavaScript or data on demand.

### Context Types

Within a context, fluxible-app creates interfaces providing access to only certain parts of the system. These are broken down as such:

 * **Action Context**: interface accessible by action creator methods. Passed as first parameter to all action creators.
 * **Component Context**: interface accessible by React components. Should be passed as prop to top level React component and then propagated to child components that require acess to it.
 * **Store Context**: interface accessible by stores. Passed as first parameter to all stores. See [dispatchr docs](https://github.com/yahoo/dispatchr#constructor-1)

### Creating Plugins

Plugins allow you to extend the interface of each context type. Here, we'll give components access to the `getFoo()` function:

```js
var FluxibleApp = require('fluxible-app');
var app = new FluxibleApp();
{'fraction_non_alphanumeric': 0.10077881619937695, 'fraction_numerical': 0.00031152647975077883, 'mean_word_length': 4.702486678507993, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 20, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1932336', 'n_tokens_mistral': 1762, 'n_tokens_neox': 1627, 'n_words': 693}