@reatom/angular

Angular bindings package for Reatom store.

Open in docs

Reatom is declarative and reactive state manager, designed for both simple and complex applications. See docs.

Install

npm i @reatom/angular

or

yarn add @reatom/angular

@reatom/angular depends on and works with @reatom/core.

Api

useAtom

Makes Observables from atom

Basic (useAtom)

const value$ = useAtom(atom)

Depended value by path

const value$ = useAtom(atom, 'value')

useAction

Binds action with dispatch to the store.

Basic (useAction)

const handleDoSome = useAction(doSome)

Usage

Step 1. Add to app module

// app.module.ts

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        NgReatomModule.forRoot(),
    ],
    providers: [],
    bootstrap: [
        AppComponent,
    ],
})
export class AppModule {
    constructor(ngReatom: NgReatom) {
        const unsubscribeDevTools = connectReduxDevtools(ngReatom.store, {});
    }
}

Step 2. Use in component

// app.component.ts

import { useAction, useAtom, requireAtom } from '@reatom/angular'

@Component({
    selector   : 'app-root',
    templateUrl: './app.component.html',
    styleUrls  : ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
    public count$ = useAtom(TodoList, 'count');
    public list$ = useAtom(TodoList, 'list');

    public addItem = useAction(addItem);

    private atoms = requireAtom(TodoList);

    constructor(private reatom: NgReatom) { }

    ngOnInit() {
        this.atoms.subscribe();
    }

    ngOnDestroy() {
        this.atoms.unsubscribe();
    }
}

<div>
    <ul>
        <li *ngFor="let item of list$ | async">{{item}}</li>
    </ul>
    <div>Count: {{count$ | async}}</div>
    <button (click)="addItem()">Add item</button>
</div>

Usage in lazy loading modules

Use in feature module

// feature.module.ts

@NgModule({
    declarations: [
        FeatureComponent,
    ],
    imports: [
        CommonModule,
        NgReatomModule.forChild(),
    ],
    providers: [],
    bootstrap: [
        FeatureComponent,
    ],
})
export class FeatureModule {}

Use in shared module

// shared.module.ts

@NgModule({
    declarations: [
        SharedComponent,
    ],
    imports: [
        CommonModule,
        NgReatomModule,
    ],
    providers: [],
    bootstrap: [
        SharedComponent,
    ],
})
export class SharedModule {}