Debug Alt.js Store case

http://stackoverflow.com/questions/40973131/listen-for-a-specific-store-property-change

by Jordan Enev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/alt.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Actions {
    constructor() {
        this.generateActions('set');
    }
}

class Store {
    constructor() {
        this.bindActions(actions);
        this.state = {
			items: [],
			isLoading: false
		};
    }
	
	set(items) {
		this.data.isLoading = true;

		// Simulate API call
		setTimeout(() => {
			this.data.items = items;
			this.data.isLoading = false;
			this.setState(this);
		}, 2000);
		
		this.setState(this);
	}
}

const alt = new Alt({
	// https://discuss.reactjs.org/t/any-plan-for-reactdom-unstable-batchedupdates/1978
	batchingFunction: ReactDOM.unstable_batchedUpdates
});
const actions = alt.createActions(Actions);
const store = alt.createStore(Store);

class App extends React.Component{
	constructor(props) {
		super(props);
		this.state = store.getState();
		this.storeOnChange = this.storeOnChange.bind(this);
		this.fetchItems = this.fetchItems.bind(this);
	}
	
	componentDidMount() {
        store.listen(this.storeOnChange);
    }

    componentWillUnmount() {
        store.unlisten(this.storeOnChange);
    }
	
	storeOnChange(nextState) {
		// Here is the misleadingness
		// Why the states are equal?
		console.log(this.state, nextState);
		this.setState(nextState);
	}
	
	fetchItems() {
		actions.set([1,2,3,4,5]);
	}
	
	render() {
		const {data} = this.state;
		
		return <div>
			<button onClick={this.fetchItems}>Fetch</button>
			
			{data.isLoading ? <div>Loading ...</div> : null }
			
			{data.items.length ? data.items.map((i) => <div key={i}>{i}</div>) : <div>No items</div> }
		</div>
	}
}

ReactDOM.render(<App />, document.getElementById('container'));