example.js

import { render, UIComponent, ModelComponent } from 'fusion';

const state = {
	people: [],
	title: 'Hello world'
};
// you could alternatively do this?
const SideBarModel = ModelComponent({
	name: 'sidebar',
	deleteItem(state, id) {
		state.people = state.people.filter(item => item.id !== id);
	},
	getPeople(state) {
		setTimeout(() => {
			state.people = [
				{ name: 'Fred', id: '1' },
				{ name: 'Bob', id: '2' }
			];
		}, 500);	
	},
	onComponentWillMount(props, state, actions) {
		actions.getPeople();
	},
	reducer(props, state) {
		return {
			list: state.people
				.filter(person => people.available)
				.map((person, i) => ({ title: `#${ i } ${ person.name }`, id: person.id }))
		};
	}
});

const HeaderModel = ModelComponent({
	name: 'header',
	reducer(props, state) {
		return {
			h1: `${ state.title } ${ props.version }`
		};
	}
});

const SidebarItem = UIComponent(({ item, deleteItem }, models) => {
	return (
		<div>
			<span>{ item.name }</span>
			<button onClick={ () => deleteItem(item.id) }>Delete</button>
		</div>
	)
});

const MyApp = UIComponent((props, { header, sidebar }) => {
	return (
		<div>
			<header>
				<h1>{ header.h1 }</h1>
			</header>
			<section class='sidebar'>
				{
					sidebar.list.map( 
						(item, i) => <SidebarItem item={ item } deleteItem={ sidebar.deleteItem } /> 
					)
				}
			</section>
		</div>
	);
});

// title prop actually goes into the ModelComponent, not to the UIComponent
render(<MyApp models={{ HeaderModel, SideBarModel }} version='1.0' />, container);