store-state-mixin

THIS REPO IS ABANDONED

With so many better and amazing tools available to pass down state in React today, this is rather pointless to use.

A React mixin for easily adding (flux) stores state to a component.

• Efficiently updates component state, only for the stores that changed
• Installs listeners on componentDidMount
• Removes listeners on componentWillUnmount
• No dependencies
• Made for Alt, but might be useful with some other React stores as well

--

Usage:

Install with npm: npm install --save store-state-mixin

A flux example with alt using store-state-mixin:

// TopLevelComponent.js

// require the mixin and child components
const StoreStateMixin		= require( 'store-state-mixin' );
const SomeChildComponent	= require( './SomeChildComponent.js' );
const OtherChildComponent	= require( './OtherChildComponent.js' );


// create a stores init object for the mixin, using key names that will be
// used as keys in this component's state and child components props
const stores= {
     someStore	: require( './stores/someStore.js' )
    ,otherStore	: require( './stores/otherStore.js' )
};

const TopLevelComponent= React.createClass({

     // add stores state and updates to component by mixin
     mixins: [ StoreStateMixin(stores) ]

    ,render: function(){

        // provide child components with stores state
        return (
            <div>
                <SomeChildComponent {...this.state} />
                <OtherChildComponent {...this.state} />
            </div>
        );
    }
});
export default TopLevelComponent;

In your child component:

// SomeChildComponent.js

// get your actions
const someActions= require( './actions/someActions.js' );

const SomeChildComponent= React.createClass({

    componentWillMount: function(){
        if ( ! this.props.someStore.info ){
            someActions.setInfo( 'Hello World!' );
        }
    }

    ,render: function(){

        return (
            <div>
                { this.props.someStore.info }
                // Hello World!
            </div>
        );
    }
});
export default SomeChildComponent;

The store:

// someStore.js

// refer to a alt instance and this store's actions
import alt           from './instance/alt.js';
import someActions	from './actions/someActions.js';

class SomeStore {

    constructor(){
        this.bindListeners({
             setInfo: someActions.SET_INFO
        });
    }

    setInfo( info ){
        this.info= info;
    }
}
export default alt.createStore( SomeStore, 'someStore' );

The actions:

// someActions.js

import alt from './instance/alt.js'

class SomeActions {

    setInfo( info ){
        this.dispatch( info );
    }
}
export default alt.createActions( SomeActions );

A single Alt instance:

// alt.js
const alt= new require( 'alt' );
export default alt

Just to complete the example:

// OtherChildComponent.js

export default null

// otherStore

import alt           from './instance/alt.js';

class OtherStore {

}

export default alt.createStore( OtherStore, 'otherStore' );

--

Change log:

0.1.5:

• changes license to MIT

--

0.1.4:

• replaces map with map-x

--

0.1.3:

• added minified version
• updated the readme
• added example files

--

0.1.2:

• adds hasOwnProperty to object map
• adds es3 compatibility

---

license

MIT