sphaera v0.2.0

Sphaera

Flux like framework for Angular2.

Concepts

Typescript Friendly. Strict type checking, and bundle index.d.ts in npm module.

Example

Sample Repository.

extends Store class.

import {Store} from 'sphaera';
import {UserAction} from '../constants/actions';

// state definition
export interface UserState {
  users?: any[]
}

// extends `Store`
export class UserStore extends Store<UserState> {
  constructor() {
    super();

    // Action and callback functions
    this.regist([
      {
        type: UserAction.FETCH,
        handlers: [this.handleFetchUsers]
      }
    ]);
  }

  // update state
  private handleFetchUsers(obj): UserState {
    return {
      users: obj.users
    };
  }
}

dispatch event to store.

import {Injectable} from 'angular2/core';

import UserService from '../services/userService';
import {UserStore} from '../stores/userStore';
import {UserAction} from '../constants/actions';

@Injectable()
export default class UserActionCreator {

  constructor(private userService: UserService, private userStore: UserStore) { }
  
  fetchUsers() {
    setTimeout(() => {
      // dispatch event...
      this.userStore.dispatch(UserAction.FETCH, {
        users: [{name: 'Bob'}, {name: 'Taro'}] 
      })
    }, 500);
  }
}

Component to Store data binding.

import {Component, Input} from 'angular2/core';

import {UserStore, UserState} from '../stores/userStore';

@Component({
  selector: 'user-list',
  template: `
    <ul>
      <li *ngFor="#user of store.state.users">{{ user.name }}</li>
    </ul>
  `,
  directives: [UserList]
})
export default class UserList {
  @Input() store: UserStore;
  
  constructor(userStore: UserStore) {
    this.store = userStore;
  }
}

or listen to update states.

@Component({
  selector: 'user-list',
  template: `
    <ul>
      <li *ngFor="#user of users">{{ user.name }}</li>
    </ul>
  `,
  directives: [UserList]
})
export default class UserList {
  @Input() users: any[];
  
  constructor(private userStore: UserStore) {
    userStore.watch().subscribe((newState) => {
      this.users = newState.users;
    });
  }
}

License

MIT