Хобрук: Ваш путь к мастерству в программировании

Дождитесь асинхронных данных из другого хранилища mobx

У меня есть 2 магазина: UserStore и TodoStore. Для получения задач мне нужно знать идентификатор моего вошедшего в систему пользователя.

Это часть моего UserStore

export default class UserStore {
  @observable currentUser = null;
  @observable loading = false;

  constructor() {
    this.subscribe();
  }

  @action subscribe = () => {
    this.loading = true;
    firebase.auth().onAuthStateChanged((user) => {
      if(user) {
        this.setCurrentUser(user);
      } else {
        this.unsetCurrentUser();
      }
      this.loading = false;
    })
  }
}

а это конструктор моего TodoStore

constructor(users) {
    this.users = users;

    console.log(this.users.currentUser) //null

    this.storageRef = firebase.storage().ref('files/todos');
    this.todosRef = firebase.database().ref(`todos/${this.users.currentUser.uid}`);
    this.filesRef = firebase.database().ref(`files/${this.users.currentUser.uid}/todos`);

    this.logger();
  }

Проблема здесь в том, что я получаю сообщение об ошибке, потому что в момент вызова этого currentUser все еще равен нулю.

Вот как я комбинирую свои магазины:

const routing = new RouterStore();
const ui = new UiStore();
const users = new UserStore(ui);
const todos = new TodoStore(users);

const stores = {
  routing,
  ui,
  users,
  todos,
}

Что я делаю не так? Как узнать, когда доступен наблюдаемый объект currentUser?


Ответы:


1

Я думаю, что самым простым решением в этом случае было бы сохранить ссылку на обещание аутентификации firebase в пользовательском хранилище и использовать currentUser в TodoStore после его разрешения:

// UserStore.js
export default class UserStore {
  @observable currentUser = null;
  @observable loading = false;
  authPromise = null;

  constructor() {
    this.subscribe();
  }

  @action subscribe = () => {
    this.loading = true;
    this.authPromise = firebase.auth().onAuthStateChanged((user) => {
      if(user) {
        this.currentUser = user;
      } else {
        this.currentUser = null;
      }
      this.loading = false;
    })
  }
}

// TodoStore.js
export default class TodoStore {
  constructor(userStore) {
    this.userStore = userStore;
    userStore.authPromise.then(() => {
      const uid = userStore.currentUser.uid;
      this.storageRef = firebase.storage().ref('files/todos');
      this.todosRef = firebase.database().ref(`todos/${uid}`);
      this.filesRef = firebase.database().ref(`files/${uid}/todos`);
      this.logger();
    });
  }
}
11.03.2017
  • Ах, да! Спасибо! почему я сам не понял :D 11.03.2017
  • Новые материалы

    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..