# @ng-vcl/store

> ng-vcl store

Latest version **0.3.19** (published 2017-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ng-vcl/store
pnpm add @ng-vcl/store
yarn add @ng-vcl/store
bun add @ng-vcl/store
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.19 |
| Published | 2017-11-16 |
| First published | 2017-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | The ng-vcl authors |
| Maintainers | andrucis, druvisc, dani723, vanthome, ng-vcl-admin |

## Links

- npm: https://www.npmjs.com/package/@ng-vcl/store
- Repository: https://github.com/ng-vcl/ng-vcl
- Homepage: https://github.com/ng-vcl/ng-vcl#readme
- Issues: https://github.com/ng-vcl/ng-vcl/issues
- npm.io page: https://npm.io/package/@ng-vcl/store

## Recent versions

- 0.3.19 (latest) — 2017-11-16
- 0.4.0-1 (next) — 2018-02-01
- 0.4.0-0 — 2017-12-04
- 0.3.18 — 2017-11-06
- 0.3.17 — 2017-10-19
- 0.3.16 — 2017-10-10
- 0.3.14 — 2017-09-30
- 0.3.13 — 2017-09-28
- 0.3.12 — 2017-09-08
- 0.3.11 — 2017-09-07
- 0.3.10 — 2017-08-15
- 0.3.9 — 2017-08-09
- 0.3.8 — 2017-08-01
- 0.3.7 — 2017-07-18
- 0.3.6 — 2017-07-17
- … 29 more at https://npm.io/package/@ng-vcl/store/versions

## README

# Store

## Installation

```sh
npm install @ng-vcl/store --save
```

## Usage

```js

import { NgModule } from '@angular/core';
import { StoreModule } from 'ng-vcl';
import { AppComponent } from './app.component';
import { REDUCERS } from './reducers';
import { EFFECTS } from './effects';

@NgModule({
  imports: [
    StoreModule.forRoot({
      enableRouter: true, // enables the StoreRouter 
      reducers: [ ... ],  // optional - Your reducers
      effects: [ ... ]    // optional - Effect classes
    })
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```


### Reducers

```js

export const initialState: BooksState = {
  loading: false,
  books: [],
  error: null
};

export class SearchBooksAction {
  constructor(public query: string) {}
}

export class SearchBooksCompleteAction {
  constructor(public books: any[]) {}
}

export class SearchBooksErrorAction {
  constructor(public error: any) {}
}

function bookReducer(state = initialState, action: SearchBooksAction | SearchBooksCompleteAction | SearchBooksErrorAction) {
  if (action instanceof SearchBooksAction) {
    return {
      loading: true,
      books: [],
      error: null
    };
  } else if (action instanceof SearchBooksCompleteAction) {
    return {
      loading: false,
      books: [...action.books],
      error: null
    };
  } else if (action instanceof SearchBooksErrorAction) {
    return {
      loading: false,
      books: [],
      error: action.error
    };
  }
  return state;
}

export const BOOK_REDUCERS = {
  books: bookReducer
}

```

### Store


```js
@Injectable()
export class BooksService {

  constructor(
    private store: Store,
  ) { }

  books$ = this.store.select<BooksState>(state => state.books);

  public search(query: string) {
    this.store.dispatch(new SearchBooksAction(query));
  }
}
```

### Effects

```js
@Injectable()
export class BooksEffects {
  constructor(
    private actions$: StoreActions,
    private http: Http
  ) { }

  @Effect()
  search = this.actions$
               .ofType(SearchBooksAction)
               .switchMap( ({query}) => {
                return this.http.get(`${API}?q=${query || ''}`)
                            .map(res => res.json())
                            .map(result => result.items)
                            .map(items => {
                              return new SearchBooksCompleteAction(items);
                            })
                            .catch(err => {
                              return Observable.of(new SearchBooksErrorAction(err));
                            });
              });
}
```

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