stux

Stux

Stux is a simplified Flux implementation written in Typescript. It's modeled after reflux but with a few differences.

Actions return Promises

All actions will return a Promise and will be thus asynchronous. This way you can chain your logic for when the action is completed (that is, all handlers registered for that action have completed).

This also means that any code registered to an action can also return a promise, thus ensuring the action's promise remains unresolved until everything is resolved.

In practice this means you can have a "save" action with perhaps multiple listeners, and you can rest assured that your logic won't continue until all complete.

Status

Stux has been lightly used but no new functionality is planned.

Installation

npm:

npm install --save stux

Bower:

bower install --save stux

Usage

Basic usage is as follows:

// classes to be used
class Todo {
  name: string;
  done: boolean;
}

// register some actions
var Actions = {
  save: Stux.createAction<Todo>()
};

// create stores that link to actions
class TodoStore extends Stux.Store<Todo> {
  private todos: Todo[];
  constructor() {
    this.todos = [];
    this.listenTo(actions.save, this.onSave);
  }
  data() {
    return this.todos;
  }
  onSave(todo: Todo) {
    this.todos.push(todo);
    this.trigger(this.todos);
  }
}
var todoStore = new TodoStore();

// react component
class TodoComponentState {
  todos?: Todo[];
}

@Stux.Component
class TodoComponent extends React.Component<any, TodoComponentState> {
  // Stux.Component declarations
  linkState: <P>(store: Stux.Store<P>, state: string) => void;
  listenTo: <P>(action: Stux.Action<P>, callback: Stux.Listener<P>) => void;
  
  constructor() {
    super();
    this.state = {};
    this.linkState(todoStore, "todos");
  }
  
  render() {
    var todos = this.state.todos;
    // ...
  }
  
  addTodo() {
    var todo = new Todo();
    todo.name = "new todo";
    todo.done = false;
    Actions.save(todo);
  }
}

License

MIT