# @spellcodes/ngrx-compose

> Compose your NGRX dispatches and call them all at once

Latest version **0.1.0** (published 2020-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @spellcodes/ngrx-compose
pnpm add @spellcodes/ngrx-compose
yarn add @spellcodes/ngrx-compose
bun add @spellcodes/ngrx-compose
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-05-10 |
| First published | 2020-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 94.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Emanuele Tuttolani |
| Maintainers | mnlttt |
| Keywords | ngrx, angular |

## Links

- npm: https://www.npmjs.com/package/@spellcodes/ngrx-compose
- Repository: https://github.com/SpellCodes/ngrx-compose
- Homepage: https://github.com/SpellCodes/ngrx-compose#readme
- Issues: https://github.com/SpellCodes/ngrx-compose/issues
- npm.io page: https://npm.io/package/@spellcodes/ngrx-compose

## Recent versions

- 0.1.0 (latest) — 2020-05-10
- 0.0.6 — 2020-05-02
- 0.0.5 — 2020-05-02
- 0.0.4 — 2020-04-28
- 0.0.3 — 2020-04-28
- 0.0.2 — 2020-04-28
- 0.0.1 — 2020-04-28

## README

# NGRX Compose

## Quick Start

- `npm i @spellcodes/ngrx-compose`
- Include `NgrxComposeModule` in your module
- Create `store/containers/my-container.container.ts`
- Compose your first container

  ```typescript
  @Injectable({ providedIn: 'root' })
  export class EmployeeContainer {
    employeeListContainer:       ContainerShip<EmployeeListDTO>;
    employeeDetailsContainer:    ContainerShip<EmployeeListDTO>;
    employeeOfTheMonthContainer: ContainerShip<EmployeeOfTheMonthDTO>;

    constructor(
      private readonly ngrxComposeService: NgrxComposeService,
    ) {
      this.employeeListContainer = ({ company }) =>
        this.ngrxComposeService.createContainer(loadEmployeeList({ company }));

      this.employeeDetailsContainer = ({ company }) =>
        this.ngrxComposeService.createContainer(
          loadEmployeeDetails(),
          [
            this.employeeListContainer({ company }),
          ],
        );

      this.employeeOfTheMonthContainer = ({ userId, company }) =>
        this.ngrxComposeService.createContainer(
          loadEmployeeOfTheMonth({ userId }),
          [
            this.employeeDetailsContainer({ company }),
          ]
        );
    }
  }
  ```

- Start using it

  ```typescript
  export class MyComponent implements OnInit {

    constructor(
      private readonly ngrxCmposeService: NgrxComposeService,
      private readonly employeeContainer: EmployeeContainer,
    ) {}

    ngOnInit(): void {
      this.ngrxCmposeService.dispatch(
        this.employeeContainer.employeeOfTheMonth({
          userId: '1337',
          company: 'E Corp'
        }),
      );
    }

  }
  ```

## Usage and API

TODO

---
_Source: https://npm.io/package/@spellcodes/ngrx-compose · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
