The dispatcher is the central hub that manages all data flow in a Flux application. It is essentially a registry of callbacks into the stores. Each store registers itself and provides a callback. When the dispatcher responds to an action, all stores in the application are sent the data payload provided by the action via the callbacks in the registry.
When using the React mixin, any component with the Flux React mixin applied, will get the state of the dispatcher's stores. In flux, the dispatcher is a singleton, and should be created when the page loads
with Flux.createDispatcher before calling React.render. Note: you can create multiple dispatchers
with delorean, but as far as the mixin is concerned, the most recently created dispatcher is the one
and only.
var TodoListApp = Flux.createDispatcher({
removeTodo: function (todo) {
if (confirm('Do you really want to delete this todo?')) {
this.dispatch('todo:remove', todo);
}
},
getStores: function () {
return {
todoStore: myTodos
}
}
});You can register global callbacks:
TodoDispatcher.register(function (actionName, payload) {
switch (actionName) {
case 'todo:add':
console.log('New todo add dispatched with payload:', payload);
break;
}
});And you can say:
TodoDispatcher.dispatch('todo:add', {text: 'Do your homework!'});When an action is dispatched, all the stores know about the status and
process the data asynchronously. When all of them are finished, the dispatcher
emits change:all event, also the dispatch method returns a promise.
var TodoListApp = Flux.createDispatcher({
removeTodo: function (todo) {
if (confirm('Do you really want to delete this todo?')) {
this.dispatch('todo:remove', todo)
.then(function () {
// All of the stores finished the process
// about 'todo:remove' action
alert('Item removed successfully');
});
}
},
getStores: function () {
return {
todoStore: myTodos
}
}
});The getStores() method is what hooks up your stores and React components to a dispatcher. This method should return an
object with a key for each store you want to respond to dispatch calls. This method is also used by
the React mixin, which uses it to apply state from these stores in your React components (states are
generated from each store's getState method).
getStore method is a shortcut to get the related store.
TodoListApp.getStore('todoStore'); // This will return `myTodos.store`waitFor function takes arguments and the event name, and returns a promise.
TodoDispatcher.waitFor([todoStore, anotherStore], 'todo:add').then(function () {
console.log('todoStore and anotherStore are changed now.');
});When working in React, view triggers offer a clean and simple API for exposing actions that are intended to be triggered
from a view. This is a React specific feature, as it relies on Flux.mixins.storeListener. viewTriggers is a hash you define on your dispatcher, the keys are trigger names, and the values are handler method names (as strings), which you have defined on the dispatcher. The React Flux.mixins.storeListener will then expose a trigger method on components.
trigger takes the trigger name as the first parameter, and 0 - n additoinal parameters you want to pass to you handler
method.
var TodoListApp = Flux.createDispatcher({
viewTriggers: {
'getTodos': 'getTodos'
},
getStores: function () {
return {
todoStore: myTodos
}
},
getTodos: function () {
// code to GET todos
},
});
var TodoListView = React.createClass({
mixins: [Flux.mixins.storeListener],
render: function () {
var self = this;
return <ul>
{this.getStore('todoStore').todos.map(function (todo) {
return <TodoItemView todo={todo}></TodoItemView>
})}
</ul>
},
componentDidMount: function() {
// `trigger` method is added by the storeListener mixin
// The first parameter is the viewTrigger name, additonal optional parameters can be passed after that
this.trigger('getTodos');
}
});