store-state-mixin v0.1.7

#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