Как наблюдать изменения, внесенные в функцию, которая вызывает firestore onSnapShot?

Question

У меня есть следующая функция:

public GetExercisePosts(user: User): ExercisePost[] {
    const exercisePosts = new Array<ExercisePost>();
    firebase.firestore().collection('exercise-posts').where('created-by', '==', user.Id).onSnapshot((results) => {
      results.forEach((postDoc) => {
        const exercisePost = Deserializer.DeserializeExercisePost(postDoc);
        if (exercisePost) {
          exercisePosts.push(exercisePost);
        }
      });
    });
    return exercisePosts;
  }

Другой компонент реагирования будет вызывать функцию следующим образом:

public async componentDidMount() {
    const personalExercisePosts = this.exerciseService.GetExercisePosts(this.state.currentUser);
    this.setState({ personalExercisePosts });
  }

Это прекрасно работает в первый раз, однако этот оригинальный метод GetExercisePosts не срабатывает после изменения снимка, что имеет смысл, поскольку componentDidMount вызывается только один раз в жизненном цикле компонента.Однако я знаю, что функция моментального снимка вызывается, потому что, когда я добавляю запись через консоль администратора Firestore, она записывает новые данные.

Как я могу наблюдать изменения, внесенные в этот снимок?Или, может быть, снимок генерирует изменение, которое компонент может прослушивать?Насколько я понимаю, я мог бы представить Redux, но я хотел бы избежать этого, если это возможно, на данном этапе.

Answer 1

Вы можете зарегистрировать обратный вызов вместо возврата, таким образом он будет срабатывать при изменении снимка, что-то вроде этого:

public GetExercisePosts(user: User, callback: (results: ExercisePost[]) => void) {
    const exercisePosts = new Array<ExercisePost>();
    firebase.firestore().collection('exercise-posts').where('created-by', '==', user.Id).onSnapshot((results) => {
      results.forEach((postDoc) => {
        const exercisePost = Deserializer.DeserializeExercisePost(postDoc);
        if (exercisePost) {
          exercisePosts.push(exercisePost);
        }
      });
      callback(exercisePosts);
    });
  }

  public async componentDidMount() {
    const personalExercisePosts = this.exerciseService.GetExercisePosts(this.state.currentUser, (posts) {
      this.setState({ posts });
    });
  }