mobx-event's Introduction

Mobx Event

Usage

1 - Create a event instance

const MobxEvent = require('mobx-event');
const CartEvent = new MobxEvent({ products: [], total: 0 });

2 - Listen state changes

// get state changes
CartEvent.on('change', newState => console.log(newState));
// or only changed attribute:
CartEvent.on('change-total', total => console.log(total));

3 - Manipulate state

CartEvent.state.products.push({ name: 'TV LED', price: 1200 }); 
// { products: [{ name: 'TV LED', price: 1200 }] }

Methods

instance.rollback( times: int, default = 1 )

Rollback to last state.

Return: undefined

instance.history()

Return a history array;

Return: array

Using with marko

1 - Export event instance. Ex: gallery.event.js

const MobxEvent = require('mobx-event');
module.exports = new MobxEvent({ photos:  [], mode: 'grid' });

2 - Create component to subscribe event

// gallery/index.marko
import GalleryEvent from  './gallery.event.js'

class {
	onMount() {
		this
			.subscribeTo(GalleryEvent)
			.on('change', () => { this.forceUpdate(); });
}

<div>
	<div class=GalleryEvent.getState().mode>
		<img for(photo in GalleryEvent.state.photos) src=photo.src title=photo.title />
	</div>
	<photo-mode ...GalleryEvent.getState() />
</div>

3 - Child component receive state from Event

// gallery/components/photo-mode/index.marko
import GalleryEvent from  '../../gallery.event.js'

class {
	changeMode(mode) {
		GalleryEvent.state.mode = mode;
	}
}

<div>
	<button on-click('changeMode', 'grid') class={ active: input.mode === 'grid' }>Grid</button>
	<button on-click('changeMode', 'table') class={ active: input.mode === 'table' }>Table</button>	
</div>

Advanced

Extending

const MobxEvent = require('mobx-event');

class TeamEvent extends MobxEvent {
	constructor(...args) {
		super(...args);
	}
	addMember(member) {
		this.state.members.push(member);
	}
}
module.exports = TeamEvent;

Recommend Projects