Mobx передает обратный вызов для обновления прогресса, не позволяя мне обновлять наблюдаемый в режиме реального времени

Question

У меня есть функция, чтобы поместить объект в хранилище Firebase. Эта функция принимает обратный вызов, который возвращает мне прогресс, чтобы я мог отслеживать его. Я хотел бы сохранить этот прогресс в наблюдаемой, однако, когда я пытаюсь обновить наблюдаемое посредством обратного вызова, я получаю ошибки, что моя наблюдаемая не определена. Вот раздетый пример:

function putThingInFirebase(thing, cb) {
  // ...
  const videoUploadTask = videoStorageRef.put(thing)
  videoUploadTask.on('state_changed', snap => {
  let progress = (snap.bytesTransferred / snap.totalBytes) * 100
  cb(Math.round(progress)) // callback from my store
  // handle errors and such
  // ....


// my store
class store {
  @observable progress
  @action upload(thing) {
     putThingInFirebase(thing, this.progressCB)
        .then(...)
  }
  progressCB(x) { // ive tried @action and @action.bound
    this.progress = x // here i get errors that this.progress is undefined yet when i do a console.log, x is being updated as expected
  }
}

То, что я ожидаю, - это наблюдаемое, которое будет обновлено с помощью обратного вызова То, что я получаю, это this.progress не определено.

У меня такой вопрос: как правильно обновить эту наблюдаемую, чтобы я мог отслеживать ход загрузки?

Спасибо, ребята, за ваше время и помощь!

РЕДАКТИРОВАТЬ: Джоэл был прав. Смотрите мои комментарии ниже для истинного виновника, хотя!

Что касается предложения об использовании разрешения из обещания, к сожалению, мне нужно было иметь доступ к слушателю "state_changed", что было бы невозможно в .then ().

Answer 1

Вы теряете свой контекст this

при вызове cb() progressCB() вызывается, но в этой функции this не является экземпляром хранилища.

попробовать:

putThingInFirebase(thing, this.progressCB.bind(this));

//or
putThingInFirebase(thing, (x) => this.progressCB(x));

дополнительный совет

Поскольку вы возвращаете обещание .then() почему бы не поместить этот метод туда? вместо также добавляется функция обратного вызова?