Réagir Mobx componentDidUpdate ne se met pas à jour quand des changements observables

Question

Je suis nouveau sur Mobx et je réagis en général, j'ai des connaissances en Redux et réagis natif, et en Redux quand j'appelais une action et les accessoires étaient mis à jour, le componentDidUpdate la méthode du cycle de vie est déclenchée.

Le scénario que j'ai en ce moment est la connexion. L'utilisateur remplit le formulaire, clique sur Soumettre et l'envoi appelle une action Mobx (asynchrone), et lorsque le serveur répond, une observable est mise à jour, puis il accède à une page principale (la navigation se passe dans le composant).

Voici mon code de magasin.

import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx'; 

useStrict(true); 

class LoginStore { 
    @observable authenticated = false; 
    @observable token = ''; 

    @computed get isAuthenticated() { return this.authenticated; } 


    @action login = async (credentials) => { 
     const res = await window.swaggerClient.Auth.login(credentials)l 
     // checking response for erros 
     runInAction(() => { 
      this.token = res.obj.token; 
      this.authenticated = true; 
     }); 
    } 
} 

const store = new LoginStore(); 

export default store; 

export { LoginStore }; 

et ce gestionnaire est dans mon composant. Ce n'est pas le code idéal, je ne fais qu'expérimenter, mais je ne comprends pas très bien.

De plus, si j'utilise la valeur calculée (isAuthenticated) dans la méthode du cycle de vie render, la componentDidUpdate est déclenchée, mais si je ne l'utilise pas dans la méthode render, la componentDidUpdate n'est pas déclenchée. Par exemple, si je fais

render() { 
    if (this.props.store.isAuthenticated) return null 
    // .... rest of the code here 
} 

ce qui précède déclenche l'componentDidUpdate.

Ai-je raté quelque chose? Yat-il une meilleure façon de le faire avec Mobx? Merci

Answer 1

Le composant observateur réagira uniquement aux observables référencés dans sa méthode render. Documentation MobX covers this. Je voudrais vous recommander d'utiliser when pour résoudre le problème.

componentDidMount() { 
    when(
    () => this.props.store.isAuthenticated, 
    () => { 
     // put your navigation logic here 
    } 
); 
}