fluxette-react

Official React bindings for fluxette.

Install

npm install --save fluxette-react

Bindings

Context A higher order React component that provides a Flux object on the context to all of its children.

import { Context } from 'fluxette-react';
import App from './app';
import flux from './flux';
 
React.render(
    <Context flux={ flux }>
        { () => <App /> }
    </Context>,
    document.getElementById('root')
);

connect([selectors]) Extends a Component to manage listeners to the Flux object on this.context, and performs a setState when the state changes. It also takes an optional selector or array of selectors, which make the state more specific. It will only calculate a new value if one of the selectors returns a new value. It makes this.context.flux.dispatch available as this.dispatch on the component.

import { connect } from 'fluxette-react';
import { details } from './creators';
 
@connect(state => state.details)
class Component extends React.Component {
    submit() {
        this.dispatch(details.update({
            nickname: React.findDOMNode(this.refs.nickname).value,
            email: React.findDOMNode(this.refs.email).value
        }));
    }
    render() {
        let details = this.state;
        return (
            <div>
                <input ref='nickname' defaultValue={ details.nickname } />
                <input ref='email' defaultValue={ details.email } />
                <button onClick={ ::this.submit }>Submit</button>
            </div>
        );
    }
}

select(getters, deriver) Creates a selector that caches the results of the getters array, which are applied to deriver as an argument list. It only returns a new value when the getters have returned new data, which is useful for data computations that would break equality checks otherwise.

import { select } from 'fluxette-react';
 
let itemsWith = {
    discount: state => state.products.onSale,
    warranty: state => state.products.warranted,
    highRating: state => state.products.highRated
};
 
let productSelector = select(
    [itemsWith.discount, itemsWith.highRating],
    (discounted, highRating) => ({ products: _.union(discounted, highRating) })
);
 
@connect(productSelector)
class CheapQualityProducts extends React.Component {
    // ...
}
 
// can also be
 
connect(productSelector)(CheapQualityProducts)