davideast / Angularfire Redux
Realtime NgRx without the reducers.
Stars: ✭ 42
Programming Languages
typescript
32286 projects
AngularFire Redux
Realtime NgRx without the reducers.
Description
This is an experimental library for making AngularFire more NgRx-like. It's not a replacement for AngularFire, it's an additive piece. AngularFire already works in a redux-ish fashion. This library changes the API surface so it more closely matches NgRx. However, since the Firebase SDK handles the synchronization of data and remote updates reducers and custom actions are not needed to manage data.
Install
yarn add angularfire-redux
Example
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from 'angularfire-redux';
import { FieldValue } from '@firebase/firestore-types';
import {
AngularFirestore,
AngularFirestoreCollection
} from 'angularfire2/firestore';
export interface Item {
name: string;
id: string;
type: string;
date: FieldValue;
}
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items$ | async">
<span>{{ item.name }}</span>
<button (click)="delete(item)">Delete</button>
</li>
</ul>
`
})
export class AppComponent implements OnInit {
items$: Observable<Item[]>;
constructor(private store: Store) { }
ngOnInit() {
this.items$ = this.store.selectCol('items', r => r.orderBy('date'));
}
delete(item: Item) {
this.store
.dispatch({ path: `items/${item.id}`, type: 'delete' });
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].