3
\$\begingroup\$

Made an Angular app using Firebase, RXJS and NGRX.

@Effect()
createQuiz$: Observable<Action> = this.actions$.pipe(
    ofType<quizAction.CreateQuiz>(quizAction.CREATE_QUIZ),
    switchMap((action) => {
        return this.quizService.createQuiz(action.payload)
        .pipe(
        map(() => {
            return new quizAction.CreateQuizCompleted()
        }),
        catchError(error => {
            console.log(error);
            return of(new quizAction.CreateQuizCompleted());
        })
        );
    })
);




@Effect()
updateQuiz$: Observable<Action> = this.actions$.pipe(
    ofType<quizAction.UpdateQuiz>(quizAction.UPDATE_QUIZ),
    switchMap((action) => {
        return this.quizService.updateQuiz(action.payload)
        .pipe(
        map(() => {
            return new quizAction.UpdateQuizCompleted()
        }),
        catchError(error => {
            console.log(error);
            return of(new quizAction.UpdateQuizCompleted());
        })
        );
    })
);



@Effect()
deleteQuiz$: Observable<Action> = this.actions$.pipe(
    ofType<quizAction.DeleteQuiz>(quizAction.DELETE_QUIZ),
    switchMap((action) => {
        return this.quizService.deleteQuiz(action.payload)
        .pipe(
        map(() => {
            return new quizAction.DeleteQuizCompleted()
        }),
        catchError(error => {
            console.log(error);
            return of(new quizAction.DeleteQuizCompleted());
        })
        );
    })
);
    

These are the NGRX effects. They are triggering a reducer function, then call a service function and then trigger another reducer function upon completion.

export class QuizComponent implements OnInit {

  constructor(
    private quizService: QuizService, 
    private store:Store<{app: fromApp.State}>,
  ) { }

  ngOnInit(): void {
  }

  trackByIdx = (index: number): number => index;

  onCreate(): void {
    this.store.select(fromApp.selectUserId).pipe(
      take(1)
    ).subscribe(userId => this.handleCreate(userId));
  }
  
  onDelete(id: string): void {
    this.store.dispatch(new AppAction.DeletePoll(id));
  }
  
  onEdit(): void {
    let value = this.quizService.createCustomQuiz();
    if (this.quizService.hasPermission(userId) && this.pollService.validateQuiz(value)) {
      this.store.dispatch(new quizAction.UpdatePoll(value));
    }
  }

  handleCreate(userId: string): void {
    let value = this.quizService.createDefaultQuiz();
    if (this.quizService.hasPermission(userId) && this.quizService.validateQuiz(value)) {
      this.store.dispatch(new quizAction.CreateQuiz(value));
    }
  }
}

This is the component that dispatches the actions.

  createQuiz(quiz:Quiz) {
    const id = this.db.createId();
    return from(
      this.db
        .collection('quizzes')
        .doc(id)
        .set({...quiz, id: id})
    );
    
  }

  updateQuiz(quiz:Quiz) {
    return from(
      this.db
        .collection('quizzes')
        .doc(quiz.id)
        .set(quiz, { merge: false })
    );
  }

  deleteQuiz(id:string) {
    return from(
      this.db
        .collection('quizzes')
        .doc(id)
        .delete()
    );
  }

These are the service methods. I am wondering if there's any improvement and if switchmap and map are correctly used.

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.