DEV Community: Luca Zampetti

Easy immutable state management with RxComp RxJs and Immer

Luca Zampetti — Sat, 25 Jul 2020 14:16:27 +0000

In this blog post we'll talk about RxComp Store a small Javascript module of RxComp, developed with Immer as a simple alternative to Redux.

The store can however be used with any framework or VanillaJS.

The store

With the useStore factory we create the immutable store with a default value.

The store will be consumed by a singleton service, and honoring the single-responsibility principle only a specific portion of the app data will be stored.

import { useStore } from 'rxcomp-store';

const { state$ } = useStore({ todolist: [] });

Subscribing to the state$ observable you always get the last immutable copy of the state draft.

state$.subscribe(state => this.todolist = state.todolist);

Reducing the store state

The reducer operator accept a reducer callback with the observable$ payload and a mutable draft of the state as parameter.

When reducer returns, an immutable copy of the state will be pushed to the state$ observable through Immer.

const { reducer } = useStore({ todolist: [] });

observable$.pipe(
  reducer((todolist, state) => state.todolist = todolist)
);

Catching errors into the state

The catchState operator is used to catch the error and store it in the immutable state.

const { catchState } = useStore({ todolist: [] });

observable$.pipe(
  catchState(console.log),
);

You can then observe the state for errors.

state$.subscribe(state => this.error = state.error);

Setting the busy state

The busy$ observable will store the busy flag in the immutable state and lock future calls until the observable completes.

const { busy$ } = useStore({ todolist: [] });

busy$().pipe(
  switchMap(() => observable$),
);

You can then observe the busy state.

state$.subscribe(state => this.busy = state.busy);

Loading state from Web Api Storage or Cookie

While reloading the page, you may want to reload the previous state of the app.

First we have to initialize the store with a different StoreType (the default is StoreType.Memory) and give it a unique store name.

import { StoreType, useStore } from 'rxcomp-store';

const { cached$ } = useStore({ todolist: [] }, 
  StoreType.Session, 'todolist'
);

With the cached$ observable we can retrieve the last saved state from sessionStorage or localStorage or cookie.

cached$((state) => state.todolist)

All together

busy$ mark state as busy
cached$ load data from cache
reducer reduce the state to the new state
catchState catch the error and reduce the state to the errored state.

import { StoreType, useStore } from 'rxcomp-store';

const { busy$, cached$, reducer, catchState } = useStore(
  { todolist: [] },
  StoreType.Session, 'todolist'
);

busy$().pipe(
  switchMap(() => 
    merge(cached$((state) => state.todolist), fromApi$).pipe(
      reducer((todolist, state) => state.todolist = todolist),
      catchState(console.log),
    )
  )
);

Querying the store state

The select$ observable accept a reducer callback with an immutable copy of the state as parameter and returns an immutable copy of a portion of the state as observable.

const { select$ } = useStore({ todolist: [] });

const todolist$ = select$((state) => state.todolist);

Querying with select

The select method works like the select$ observable but doesn't return an observable.

const { select } = useStore({ todolist: [] });

const todolist = select((state) => state.todolist);

In Conclusion

RxComp Store works with any framework or VanillaJS,

but is designed as a RxComp module.

If you want to know more about the integration with RxComp you can read the introduction article RxComp a modern ES6 alternative to Angular component framework.

If you got any idea, implementation or methods naming preferences feel free to contribute!

demo - codesandbox - repository

Other methods

Setting the store state

The next method accept a reducer callback with a mutable draft of the state as parameter.

When reducer returns, an immutable copy of the state will be pushed to the state$ observable through Immer.

It works like the reduce operator but doesn't return an observable.

const { next } = useStore({ todolist: [] });

next((state) => state.todolist = todolist))

Setting the store error

The nextError method will store the error parameter in the immutable state.
It works like the catchState operator but is intended to use in conjunction of classic catchError operator.

const { nextError } = useStore({ todolist: [] });

catchError(error => nextError(error))

RxComp a modern ES6 alternative to Angular component framework

Luca Zampetti — Thu, 26 Dec 2019 21:51:04 +0000

In this blog post we'll talk about RxComp a small Javascript component library built on top of RxJS and still in beta stage, developed as a simple alternative to Angular framework to use in all those occasions where angular is challenging to apply.

Introduction

Working as a developer, I find many occasions in which for team reasons we can't implement a complex framework like Angular, say for the use of javascript code non-compliant with angular, say for the decision to use a more Vanilla like approach to the project.

In all those moments we are still missing the power and flexibility of the Angular declarative syntax and component modularity, up to the point we decided to implement all those features into a compact ES6 javascript library.

The goals of the RxComp component library

Below is a list of what we consider to be the main outcomes of the library

Advantages of the Template Declarative Syntax
Easy implementation
Modularity
Extensibility

What to consider out of scope

We don't want to rebuild another SPA framework; there is plenty that does an amazing job and cover every needs. For this reason, every feature listed below is considered out of scope

~~Routing~~
~~HttpClient~~
~~Server Side Rendering~~
~~Dependency Injection~~
~~Change Detection~~
~~Two-Way Data Binding~~
~~Zone~~

So what is included in the library?

Modules

CoreModule is shipped with the main RxComp lib.

It includes declarations of all the basic directives, structural directives like *if and *for and Dom directives like ClassDirective, EventDirective, InnerHtmlDirective and StyleDirective.

You can also extend modules through imports and exports meta tags.

const declarations = [
    ClassDirective,
    EventDirective,
    ForStructure,
    IfStructure,
    InnerHtmlDirective,
    StyleDirective,
    JsonPipe
];
export default class CoreModule extends Module {}
CoreModule.meta = {
    declarations: [
        ...declarations
    ],
    exports: [
        ...declarations
    ]
};

The CoreModule class declarations and exports

Components

Components define areas of responsibility in the user interface. In the MVC paradigm, they could be viewed as controllers.

The library automatically setup for you these component properties through meta tags:

selector

The CSS selector that identifies the component or directive inside the Dom or inside a template and triggers the instantiation of the component or directive.

inputs

It is possible to pass input values to components through HTML node attributes, just define yours named inputs as a meta collection and values will be automatically passed with OnPush change detection to the component.

outputs

As for inputs, outputs are defined as a named meta collection and automatically generated as RxJS Subjects for output event emitting.

hosts

You can define hosts as a key / Factory collection that will be auto resolved in the component parent hierarchy.

template

Even if the lib is designed to work with inline static template syntax, is also possible to define the component's HTML template through the template meta tag.

TodoItemComponent.meta = {
  selector: '[todo-item-component]',
  inputs: ['item'],
  outputs: ['toggle', 'remove'],
  hosts: {
    host: HostFactory
  },
  template: /* html */ `
    <button type="button" (click)="onToggle(item)">
      <div class="date" [innerHTML]="item.date | date"></div>
      <div class="title" [innerHTML]="item.name"></div>
    </button>
    <button type="button" (click)="onRemove(item)">
      <i class="icon--remove"></i>
    </button>
    `,
};

Example of Component meta tags definition

Pipes

Pipes just work as Angular pipes version, they are static named functions used to transform values through declarative syntax.

OnPush Strategy Change Detection

There is no binding change detection on RxComp, the only way to update values of a component and all its child instances is through OnPush change detection.

Just fire this.pushChanges(); method on a component when updating values is needed.

FormModule

FormModule is an extension of the core lib available as a separate npm package. It brings form validation and Reactive Forms.

export default class FormComponent extends Component {

    onInit() {
        const form = new FormGroup({
            firstName: null,
            lastName: null,
            email: null,
        }, RequiredValidator());

        form.changes$.subscribe((changes) => {
            this.pushChanges();
        });

        this.form = form;
    }

}

Use of the FormModule in a component

In Conclusion

If you like Angular declarative syntax but you just want to go Vanilla, RxComp component library come in useful. Built on top of RxJS it mimics the Angular declarative syntax with a bundle size of 5.45Kb gzipped or 16.9Kb minified.

repository

demo

demo source

codepen

Any feedback would be much appreciated!

Bootstrapping Module

import {
    Browser,
    CoreModule,
    Module
} from 'rxcomp';

export default class AppModule extends Module {}

AppModule.meta = {
    imports: [
        CoreModule
    ],
    declarations: [
        TodoItemComponent,
        DatePipe,
    ],
    bootstrap: AppComponent,
};

Browser.bootstrap(AppModule);

Bootstrapping the AppModule

Component Definition

export default class TodoItemComponent extends Component {

  onChanges(changes) {
    this.color = color(changes.item.id);
  }

  onToggle($event) {
    this.toggle.next($event);
  }

  onRemove($event) {
    this.remove.next($event);
  }

}

TodoItemComponent.meta = {
  selector: '[todo-item-component]',
  inputs: ['item'],
  outputs: ['toggle', 'remove'],
  hosts: {
    host: HostFactory
  },
  template: /* html */ `
      <button type="button" (click)="onToggle(item)">
        <div class="date" [innerHTML]="item.date | date"></div>
        <div class="title" [innerHTML]="item.name"></div>
      </button>
      <button type="button" (click)="onRemove(item)">
        <i class="icon--remove"></i>
      </button>
    `,
};

Example of Component definition

Declarative Syntax

<li *for="let item of items" todo-item-component [item]="item" (toggle)="onToggleItem($event)" (remove)="onRemoveItem($event)" [class]="{ done: item.done }" [style]="{ background: background }">
    <button type="button" (click)="onToggle(item)">
        <div class="date" [innerHTML]="item.date | date : 'en-US' : { month: 'short', day: '2-digit', year: 'numeric' }"></div>
        <div class="title" [innerHTML]="item.name"></div>
    </button>
    <button type="button" (click)="onRemove(item)">
        <i class="icon--remove"></i>
    </button>
</li>

Example of the template declarative syntax

LifeCycle Hooks

class MyComponent extends Component {

    /** 
     * MyComponent instance has been initialized
     * we can add custom properties to the instance
     */
    onInit() {
        // ...
    }

    /** 
     * OnPush Strategy update method has been called
     * we receive changes from parent instance
     */
    onChanges(changes) {
        // ...
    }

    /** 
     * Current instance template has been parsed
     * we can handle child html nodes
     */
    onView() {
        // ...
    }

    /** 
     * MyComponent instance has been destroyed
     * we can dispose all custom created references
     */
    onDestroy() {
        // ...
    }

}

LifeCycle Hooks