store-state-mixin

    0.1.7 • Public • Published

    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

    Install

    npm i store-state-mixin

    DownloadsWeekly Downloads

    0

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    9.48 kB

    Total Files

    12

    Last publish

    Collaborators

    • phazelift