есть хороший пример использования NGRX с угловым огнем

Использование NGRX / store и firebase впервые.

код в сервисе бронирования выглядит так:

reservations: FirebaseListObservable<Reservation[]> = null;

с помощью такого метода создания:

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 подключены правильно, только когда я пытаюсь использовать его с angular-fire, у меня возникают проблемы, поскольку это не ваш типичный CRUD ... GET, POST и т. д.

есть хороший пример использования NGRX и angular-fire.

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

}


firebase angular angularfire2 ngrx-store
person Mel Pacheco    schedule 19.08.2017    source источник
comment
Вы можете подробно описать свою проблему, я создал приложение с помощью ngrx v4. и всего один метод с использованием firebase эффекты. Подробнее о ngrx   -  person Rahul Singh    schedule 19.08.2017
comment
У меня есть действие createReservation, которое запускает эффект createReservation, который switchMaps в метод резервацииService.createReservation (резервирование) с резервированием в качестве полезной нагрузки. Думаю, мне нужно написать методы в сервисе немного по-другому при использовании NGRX и firebase вместе, потому что я получаю только эти ошибки и пытаюсь использовать две библиотеки вместе.   -  person Mel Pacheco    schedule 19.08.2017
comment
вы можете проверить эту ссылку git, которую я дал вам для футбольного приложения, которое я создаю с помощью ngrx и angular, я просто использую pagecount в firebase, но я думаю, это может быть полезно   -  person Rahul Singh    schedule 19.08.2017
comment
ОК, спасибо, сделаем.   -  person Mel Pacheco    schedule 19.08.2017
comment
У вас есть пример, когда вы пишете в базу данных firebase с помощью push?   -  person Mel Pacheco    schedule 19.08.2017
comment
для push просто имейте полезную нагрузку и добавьте ее к методу, который будет работать   -  person Rahul Singh    schedule 19.08.2017
comment
Я передаю полезную нагрузку в эффект и использую ее в службе, я считаю, что проблема в службе. независимо от того, как я это пишу, я получаю эти ошибки Тип «ThenableReference» не может быть назначен типу «Observable ‹any›». Свойство _isScalar отсутствует в типе ThenableReference.   -  person Mel Pacheco    schedule 19.08.2017
comment
можешь показать способ обслуживания?   -  person Rahul Singh    schedule 19.08.2017
comment
Позвольте нам продолжить это обсуждение в чате.   -  person Mel Pacheco    schedule 19.08.2017

Ответы (2)


arrow_upward
3
arrow_downward

Я с удовольствием порекомендую курс Максимилиана Шварцмюллера по Udemy "Angular 4 (ранее Angular 2) - Полное руководство ». Этот эпический курс охватывает всю экосистему Angular, и он (только на прошлой неделе) опубликовал «бонусный курс» на NgRx, где он интегрируется с серверной частью Firebase без использования angularfire2.

Как обычно бывает, когда я задаю Макс вопрос, результатом стало переосмысление моих собственных предположений; пока я остаюсь спрашивать, почему я решил добавить зависимость, такую ​​как angularfire2, в уже сложный стек?

Подумайте об этом - обещание NgRx (по крайней мере, как я его вижу) заключается в том, чтобы переместить большую часть (надеюсь, всю) вашего уровня обслуживания и бизнес-логики из вашего в магазин. В этой парадигме я не уверен, что angularfire2 много чего принесет.

У меня были трудности с включением angularfire2 и NgRx v4, и, как и вы, я не смог найти никого, у кого бы они хорошо играли.

Я думаю, что пока я возьму на себя инициативу Макса и буду избегать зависимостей от angularfire2, пока у меня не будет достаточно сложный фрагмент кода, работающий на чистой основе HTML (только firebase), тогда я могу постепенно вводить модули angularfire2 и смотреть, не сломается ли что-нибудь.

person Community    schedule 26.08.2017
comment
Да, только что видел обновление курса, не могу дождаться, чтобы покопаться в нем. - person Mel Pacheco; 26.08.2017

arrow_upward
0
arrow_downward

Полученный вами 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);
 }

Я добавил этот уникальный идентификатор в само резервирование, чтобы вы могли ссылаться на него для УДАЛЕНИЯ и ОБНОВЛЕНИЯ позже. Тогда в эффекте следует сделать следующее:

@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 вы должны сопоставлять объекты по индексу, потому что * ngFor не сможет отобразить, если вы сопоставите объекты по идентификатору (id теперь что-то вроде 4SzQ69wsaDjGIu1n9YL7, то есть то же, что и ссылка)

person Radovan Skendzic    schedule 22.07.2018