# ajwah-angular-store

> 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.

Latest version **3.0.0** (published 2020-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ajwah-angular-store
pnpm add ajwah-angular-store
yarn add ajwah-angular-store
bun add ajwah-angular-store
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2020-05-09 |
| First published | 2019-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 264 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jasim Uddin Khan |
| Maintainers | jukhan |
| Keywords | ajwah, rxjs, reactive, redux |

## Links

- npm: https://www.npmjs.com/package/ajwah-angular-store
- Repository: https://github.com/JUkhan/Ajwah
- Homepage: https://github.com/JUkhan/Ajwah#readme
- Issues: https://github.com/JUkhan/Ajwah/issues
- npm.io page: https://npm.io/package/ajwah-angular-store

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 3.0.0 (latest) — 2020-05-09
- 2.0.0 — 2019-09-21
- 1.7.7-gen-promise — 2019-09-20
- 1.7.6-gen-promise — 2019-09-17
- 1.7.5-gen-promise — 2019-09-17
- 1.7.5 — 2019-09-14
- 1.7.4 — 2019-09-05
- 1.7.3 — 2019-09-03
- 1.7.2 — 2019-08-31
- 1.7.1 — 2019-08-30
- 1.7.0 — 2019-08-28
- 1.6.2 — 2019-08-24
- 1.6.1 — 2019-08-24
- 1.6.0 — 2019-08-18
- 1.5.0 — 2019-08-16
- … 15 more at https://npm.io/package/ajwah-angular-store/versions

## README

# 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

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

### Example

### counterState

```javascript
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

```js
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

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

[React Doc](https://github.com/JUkhan/Ajwah/tree/minandeasy/docs/react#ajwah)

[Vue Doc](https://github.com/JUkhan/Ajwah/tree/minandeasy/docs/vue#ajwah)

[Angular Doc](https://github.com/JUkhan/Ajwah/tree/minandeasy/docs/angular#ajwah)

---
_Source: https://npm.io/package/ajwah-angular-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._