反応するMobxのcomponentDidUpdateは観測可能な変更をしても更新されていません

Question

私はMobxとreactjsを初めて使いました。私はReduxで知識を持っていてネイティブに反応しています。ライフサイクルメソッドがトリガーされます。

私が今行っているシナリオはログインです。ユーザーがフォームを塗りつぶし、submitをクリックし、submitがMobxアクション（非同期）を呼び出し、サーバーが応答すると、observableが更新され、メインページに移動します（ナビゲーションはコンポーネント内で行われます）。

私のストアコードはここにあります。

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 }; 

このハンドラは私のコンポーネントです。

handleSubmit = (e) => { 
     e.preventDefault(); 

     this.props.form.validateFields((err, values) => { 
      if (!err) { 
       this.props.store.login(values); 
      } 
     }); 
    } 

    componentDidUpdate() { 
     if (this.props.store.isAuthenticated) { 
      const cookies = new Cookies(); 
      cookies.set('_cookie_name', this.props.store.token); 
      this.props.history.push('main'); 
     } 
    } 

これは理想的なコードではありません。私は実験していますが、それほど得意ではありません。また

、私はrenderライフサイクル法で計算値(isAuthenticated)を使用する場合、componentDidUpdateがトリガされますが、私はcomponentDidUpdateがトリガされていない、render方法でそれを使用しなかった場合。例えば 、私はこの

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

を行う場合は、上記のcomponentDidUpdateをトリガします。

何か不足していますか？ Mobxでもっと良い方法がありますか？ ありがとう

Answer 1

オブザーバコンポーネントは、そのrenderメソッドで参照されるオブザーバブルにのみ反応します。 MobXのマニュアルcovers this。

whenを使用して問題を解決することをお勧めします。

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