Ajwah

Rx based store library for React, Vue, Angular, Preact. Manage your application's states, effects, and actions easy way. It's easy to use in functional components with React hooks.

Installation

>> npm i ajwah-angular-store
>> npm i ajwah-devtools

Example

counterState

import { BaseState, Action } from "ajwah-angular-store";
import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from "../store/actions";
import { Injectable } from "@angular/core";
interface Counter {
  msg: string;
  count: number;
}
@Injectable()
class CounterState implements BaseState<Counter> {
  stateName: string = "counter";
  initState: Counter = { count: 12, msg: "" };

  async *mapActionToState(
    state: Counter,
    action: Action
  ): AsyncIterableIterator<Counter> {
    switch (action.type) {
      case INCREMENT:
        yield { count: state.count + 1, msg: "" };
        break;
      case DECREMENT:
        yield { count: state.count - 1, msg: "" };
        break;
      case ASYNC_INCREMENT:
        yield { count: state.count, msg: " loading..." };
        yield { msg: "", count: await this.getData(state.count) };
        break;
      default:
        yield state;
    }
  }

  getData(num: number): Promise<any> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(num + 1);
      }, 1000);
    });
  }
}

export default CounterState;

counterComponent

import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from "../store/actions";
import { Store, dispatch } from "ajwah-angular-store";
import { Component, ChangeDetectionStrategy, Input } from "@angular/core";

import CounterState from "../store/counterState";

@Component({
  selector: "counter",
  template: `
    <button (click)="removeState()">Remove State</button>
    <button (click)="addState()">Add State</button>
    <p *ngIf="counter">
      <button class="btn" (click)="inc()">+</button>
      <button class="btn" (click)="dec()">-</button>
      <button class="btn" (click)="asyncInc()">async(+)</button>
      {{ counter.msg || counter.count }}
    </p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Counter {
  @Input() counter: any;

  constructor(public store: Store) {}

  inc() {
    dispatch(INCREMENT);
  }
  dec() {
    dispatch(DECREMENT);
  }
  asyncInc() {
    dispatch(ASYNC_INCREMENT);
  }

  removeState() {
    this.store.removeState("counter");
  }
  addState() {
    this.store.addState(CounterState);
  }
}

App.modules

imports: [
  AjwahStoreModule.forRoot({
    rootStates: [counterState],
    devTools: devTools(),
  }),
];

React Doc

Vue Doc

Angular Doc