node package manager


tokyo Build Status NPM Version License

Tokyo is a foundation for building Flux-like applications. It provides simple base classes and helpers for setting up stores and components. It is inspired by Fluxxor and Flux. It uses Flux's dispatcher class but uses classes as identifiers for actions instead of string constants. It is intended to be used with the libraries Yokohama (for dependency resolution) and Hiroshima (for routing).


import React, {Component} from 'react';
import {Resolver, dependencies, inject, injectPromise} from 'yokohama';
import {Dispatcher} from 'flux';
import {Store} from 'tokyo';
import {RouteParams} from 'somewhere-else';
class CreateTaskAction {
    constructor(title) {
        this.title = title;
function ResolveTasks() {
    const tasks = new Backbone.Collection([], {url: '/tasks'});
    return tasks.fetch().return(tasks);
@inject(Dispatcher, ResolveTasks)
class TasksStore extends Store {
    constructor(dispatcher, tasks) {
        this.tasks = tasks;
        this.tasks.on('add change remove', () => this.emit('change'));
        this.bind(CreateTaskAction, this.handleCreateTask);
    handleCreateTask({title}) {
    getTasks() {
        return this.tasks;
@dependencies({tasksStore: TasksStore})
class TasksComponent extends Component {
    // ... 
Resolver.from(TasksComponent).resolve().then(function(dependencies) {
    dependencies.tasksStore instanceof TasksStore; // true 
    React.render(<TasksComponent data={dependencies}/>, document.body);