store-state-mixin

2 min read Original article ↗

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:

const StoreStateMixin		= require( 'store-state-mixin' );
const SomeChildComponent	= require( './SomeChildComponent.js' );
const OtherChildComponent	= require( './OtherChildComponent.js' );
const stores= {
     someStore	: require( './stores/someStore.js' )
    ,otherStore	: require( './stores/otherStore.js' )
};
const TopLevelComponent= React.createClass({
     mixins: [ StoreStateMixin(stores) ]
    ,render: function(){
        return (
            <div>
                <SomeChildComponent {...this.state} />
                <OtherChildComponent {...this.state} />
            </div>
        );
    }
});
export default TopLevelComponent;

In your child component:

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 }
            </div>
        );
    }
});
export default SomeChildComponent;

The store:

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:

import alt from './instance/alt.js'
class SomeActions {
    setInfo( info ){
        this.dispatch( info );
    }
}
export default alt.createActions( SomeActions );

A single Alt instance:

const alt= new require( 'alt' );
export default alt

Just to complete the example:

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