Attendre les données asynchrones d'un autre magasin mobx

Question

J'ai 2 magasins: UserStore et TodoStore. Pour aller chercher les todos, j'ai besoin de connaître l'identifiant de mon utilisateur connecté.

Cela fait partie de mon 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; 
    }) 
    } 
} 

ce qui est le constructeur de mon 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(); 
    } 

Le problème ici est que je reçois une erreur, car au moment d'appeler cela le currentUser est toujours nul.

Voilà comment je combine mes magasins:

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

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

Qu'est-ce que je fais mal? Comment puis-je savoir quand l'observateur currentUser est disponible?

Answer 1

Je pense que la solution la plus simple est ce cas serait de sauver une référence à la promesse auth firebase dans le magasin d'utilisateurs, et utiliser le currentUser dans le TodoStore une fois qu'il a résolu:

// 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(); 
    }); 
    } 
}