@ng-vcl/store
v0.3.19
Published
ng-vcl store
Downloads
48
Keywords
Readme
Store
Installation
npm install @ng-vcl/store --save
Usage
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
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
@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
@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));
});
});
}