geRx - Global Event Reactive Extensions

geRx is a state management pattern, built on top of RxJs. The main advantage is ease of use.

The fundamental idea behind geRx is to initiate the execution of the entire life cycle by calling a single operation. This means that a request for getting or updating data will not only update the state of the storage but also trigger an event to fetch the latest data from the storage. Take a look at the life cycle implementation diagram:

In geRx, CRUD classification is used for interacting with the storage. CRUD operations combine Action and Reducer functions, but they are separated by their semantic purpose. Each completed operation should return a unified data model specific to the current entity of the storage or null.

For example, let's consider a user list interface that displays an array of objects [{id: “1”, name: “Alex”}, {id: “2”, name: “Sam”}] in the form of a table. When the create operation is executed, we will send the data of the new user {name: “Bill”} to the server and receive an updated array of users [{id: 1, name: “Alex”}, {id: 2, name: “Sam”}, {id: 3, name: “Bill”}] in response, which we will then display in the interface. When the delete operation ({id: 2}) is performed, we will also return the updated data model [{id: 1, name: “Alex”}, {id: 3, name: “Bill”}].

Example

• app.module.ts

import { Index } from 'geRx';

@NgModule({
  [...]
  providers: [Index],
  [...]
})
export class AppModule {}

• app.service.ts

export class AppService {
  hello(): Observable<any>  {
    return of({message: 'Test geRx'}).pipe(delay(3000));
  }

  edit(text: string): Observable<any> {
    return of({message: text}).pipe(delay(3000));
  }
  
  editSuccess(data: any): Observable<any> {
    return of(
      console.log({message: 'Test editSuccess'}),
      console.log(data)
    );
  }

}

• app.component.ts

@Component({
  selector: 'test-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent implements OnInit, AfterViewInit {

  public entityName = 'hello';
  constructor(public geRx: Index, private appService: AppService) {}

  ngOnInit(): void {
    const geRxMethods: GeRxMethods = {
      show: {
        main: this.appService.hello
      },
      edit: {
        main: this.appService.edit,
        success: this.appService.editSuccess
    };
    this.geRx.addEntity(this.entityName, geRxMethods, this.appService);
  }

  ngAfterViewInit(): void {
    this.geRx.show(this.entityName);
  }

  onEdit(text): void {
    this.geRx.edit(this.entityName, text);
  }

  onClear(): void {
    this.geRx.cleanEntity(this.entityName);
  }
}

• app.component.html

<p>Data$: {{ geRx.getData$(entityName) | async | json }}</p>
<p>Loading$: {{ geRx.loading$(entityName) | async | json }}</p>
<p>
  <input type="text" #test />
  <button (click)="onEdit(test.value)">Edit</button>
  <button (click)="onClear()">Clear</button>
</p>

Description of the methods:

• addEntity(name: string, methods: GeRxMethods, thisContext: any, options?: GeRxOptions) - creating geRx entity.
  • thisContext - this context for GeRxMethods
• deleteEntity(name: string) - delete geRx entity
• cleanEntity(name: string) - clearing .data and .data$ data in a geRx entity
• getData$(entityName: string) - getting data using onPush strategy
• getData(entityName: string) - getting data using onPull strategy
• loading$ - request status at the moment of use onPush strategy
• loading - request status at the moment of use onPull strategy

Methods for sending data and changing state of an entity

• show(entityName: string, params?: any)
• add(entityName: string, params?: any)
• edit(entityName: string, params?: any)
• delete(entityName: string, params?: any)

Types of parameters used

• GeRxMethods:

  {
    show?: GeRxSubMethods; 
    add?: GeRxSubMethods; 
    edit?: GeRxSubMethods; 
    delete?: GeRxSubMethods; 
    exception?: GeRxSubMethods
  }

• GeRxSubMethods:

  {
    main: (params?: any, options?: GeRxMethodOptions) => Observable<any>;
    success?: (params?: any, options?: GeRxMethodOptions) => Observable<any>;
    error?: (params?: any, options?: GeRxMethodOptions) => Observable<any>;
  }

• GeRxMethodOptions: { switchKey?: string; }
• GeRxOptions: { override: boolean; }
  • override - recreate an entity when it is reinitialized