Skip to content

Understanding Alt Store

nim23 edited this page May 31, 2015 · 8 revisions

Store can be thought as a central repository of data for you component's/views.:

'use strict';
class ProjectStore {
	constructor() {
		this.bindActions(this.alt.getActions('projects'));
		this.projects = [];
	}

	onFetchSuccess(projects) {
		return this.setState({ projects });
	}
}

export default ProjectStore;

In the code example above Project Store exposes a projects array with this.projects = [] which will be available to the consumer's of the class.

this.bindActions(this.alt.getActions('projects')) can be a lot to grasp at the beginning. Let's begin with this.alt.getActions('projects'). this.alt is the currently instantiated instance of the Alt/Flux, this allows access to actions and stores that have been instantiated with the current instance of Flux.

this.bindActions simply binds the actions defined in Project Actions class to function inside the Project Store. For e.g If the Project Action class has a action called fetchSuccess the function automatically bind's the fetchSuccess action to onFetchSuccess function of the store.

this.setState({ projects });. This is equivalent to this.projects = projects; but is the recommended way to update store's as it emit's change event's which react views listen to, so that they can re-render themselves.

Clone this wiki locally