angular-spawn-x

v1.0.1

Published

4 years ago

Angular connector for spawn-x. (Reactive management for javaScript applications)

0High
0Medium
0Low

alexplex

state store app management control predictable live observer reactive redux flux mobx observable rxjs angular @angular

angular-spawn-x

Angular connector for spawn-x (AoT supports).

install

With npm:

npm install angular-spawn-x --save

With yarn:

yarn add angular-spawn-x

Usage

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Add the ngSpawnModule in dependencies

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgSpawnModule } from 'angular-spawn-x';

import { configureStore } from './store';
import { AppComponent } from './app.component';
import { PresenterComponent } from './components/presenter.component';
import { UserActions } from './actions/user';


@NgModule({
  declarations: [
    AppComponent,
    PresenterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgSpawnModule.forRoot(configureStore)
  ],
  providers: [UserActions],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configure store with standarts functions createStore and addInterceptor

app/store/index.ts

import { createStore, addInterceptor } from 'angular-spawn-x';

const initialState = {
  users: [],
  some: {
    text: 'Hello World'
  },
  parent: {
    child: 'I am child'
  }
};

function logger(store) {
  return next => action => {
    next(action);
    console.log('action: ', action.type + ' -> ', action.data);
  }
}

export function configureStore() {
  return createStore(initialState, addInterceptor(logger));
}

Inject ngSpawn into your app, and use select, detect, reject and update methods

app/actions/user.ts

import { Injectable } from '@angular/core';
import { NgSpawn } from 'angular-spawn-x';


@Injectable()
export class UserActions {
  constructor(private ngSpawn: NgSpawn) {}

  addUser = user => {
    this.ngSpawn.update('users', {
      data: this.ngSpawn.select('users').concat(user),
      type: 'ADD_NEW_USER'
    });
  }
}

For subscribe or unsubscribe on data use connect and disconnect methods like below

app/app.component.ts

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy
} from '@angular/core';
import { NgSpawn } from 'angular-spawn-x';
import { UserActions } from '../actions/user';


@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-presenter
      [users]="users"
      [text]="text"
      [data]="data"
      (addUser)="addUserHandler($event)">
    </app-presenter>
  `
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    private ngSpawn: NgSpawn,
    private userActions: UserActions
  ){}

  ngOnInit() {
    //selection from store
    const selection = {
      users: 'users',
      text: 'some.text',
      data: ['parent.child', state => state.parent.child]
    };
    //connect to store
    this.ngSpawn.connect(selection)(this);
  }

  ngOnDestroy() {
    //disconnect from store
    this.ngSpawn.disconnect(this);
  }

  addUserHandler(user) {
    this.userActions.addUser(user);
  }
}

app/components/presenter.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ChangeDetectionStrategy
 } from '@angular/core';


@Component({
  selector: 'app-presenter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      <h1>User List</h1>
      <ul>
        <li *ngFor="let user of users">{{ user.name }} | {{ user.age }}</li>
      </ul>
      <form (submit)=handleSubmit($event)>
        <input type="text" name="name"/>
        <input type="number" name="age"/>
        <button type="submit">Add New User</button>
      </form>
    </div>
  `
})
export class PresenterComponent implements OnInit {
  @Input() users: any;
  @Input() text: string;
  @Input() data: string;
  @Output() addUser = new EventEmitter<any>();

  constructor() {}

  ngOnInit() {}

   handleSubmit = ev => {
    console.log('some text from state: ', this.text);
    console.log('some data from state: ', this.data);

    this.addUser.emit({
      name: ev.target.name.value,
      age: ev.target.age.value
    })

    ev.target.name.value = '';
    ev.target.age.value = '';
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

angular-spawn-x

Angular connector for spawn-x (AoT supports).

install

Usage

index.html

main.ts

Add the ngSpawnModule in dependencies

app/app.module.ts

Configure store with standarts functions createStore and addInterceptor

app/store/index.ts

Inject ngSpawn into your app, and use select, detect, reject and update methods

app/actions/user.ts

For subscribe or unsubscribe on data use connect and disconnect methods like below

app/app.component.ts

app/components/presenter.component.ts

LICENSE