Question

首次使用NGRX / store和firebase。

预订服务中的代码如下所示：

reservations: FirebaseListObservable<Reservation[]> = null;

使用这样的create方法：

createReservation(reservation: Reservation): FirebaseListObservable<Reservation> {
    return this.reservations.push(reservation)
  }

NGRX /效果如下所示：

@Effect()
  create$: Observable<Action> = this.actions$
.ofType(reservationsActions.CREATE)
.map((action: reservationsActions.Create) => action.payload)
.switchMap((reservation) =>
  this.reservationsService.createReservation(reservation)
    .map( (createdReservation: Reservation) => new reservationsActions.CreateSuccess(createdReservation))
);

我收到此错误

Type 'ThenableReference' is not assignable to type 'FirebaseListObservable<Reservation>'

我试过

:Observable<any>

我明白了

Property '_isScalar' is missing in type 'ThenableReference'.

所有NGRX的东西都正确连线，只有当我尝试使用角速火时我才会遇到问题，因为它不是典型的CRUD ... GET，POST等。

有一个使用NGRX和角点火的好例子。

createReservation(reservation: Reservation): Observable<any> {
return this.db.list(`${this.basePath}/${this.uid}`).push(reservation);

}

Answer 1

我很乐意推荐MaximilianSchwarzmüller关于Udemy "Angular 4 (formerly Angular 2) - The Complete Guide"的课程。这个史诗课程涵盖了整个Angular生态系统，他（仅在上周）在NgRx上发布了一个“奖励课程”，他正在与Firebase后端集成，而不使用angularfire2。

通常情况下，向Max询问一个问题时，结果是我重新考虑自己的假设;现在我不知道为什么我选择在已经毛茸茸的堆栈中添加像angularfire2这样的依赖？

想想看 - NgRx的承诺（至少在我看来）是将你服务层和业务逻辑的很大一部分（希望是全部）从你的商店中移出。在这个范例中，我不确定angularfire2给聚会带来了多少。

我在使用angularfire2和NgRx v4时遇到了困难，和你一样，我找不到任何让他们玩得很好的人。

我认为现在我将采用Max的主导并避免依赖于angularfire2，直到我有一个相当复杂的代码工作在纯HTML基础上（单独使用firebase）然后我可以逐步引入angularfire2模块并查看是否有任何中断。

Answer 2

ThenableReference是您从Firebase成功获得的唯一回应。它不会返回您需要的整个对象，因此您必须自己检索它。

我会写下对我有用的东西，你应该先吃点盐。

createReservation(reservation: Reservation): FirebaseListObservable<Reservation> {
    const reservations = this.afs.collection('reservations');
    const id = this.afs.createId();
    reservations.doc(id).set({ id, ...reservation});
    return reservations.doc(id);
 }

我已将此唯一ID添加到保留本身，因此您以后可以引用它进行DELETE和UPDATE。然后，您应该执行以下操作：

@Effect()
  create$: Observable<Action> = this.actions$
.ofType(reservationsActions.CREATE)
.pipe(
    map((action: reservationsActions.Create) => action.payload),
    map((reservation) => this.reservationsService.createReservation(reservation),
    switchMap(reservationDocument: AngularFirestoreDocument) => from(reservationDocument.ref.get())),
    map(snapshot: any) => {
       const createdReservation = snapshot.data();
       return new reservationsActions.CreateSuccess(createdReservation));
  })
);

请注意，现在在reducer中应按索引映射实体，因为如果按id映射实体，* ngFor将无法呈现（id现在类似于 4SzQ69wsaDjGIu1n9YL7 ，即与引用相同）

是否有一个使用NGRX与角火的好例子

2 个答案: