MOBX Injecter, Observer et DiC ensemble

Question

Voici un code que j'ai https://jsfiddle.net/v0592ua1/1/

const {observable, computed, extendObservable} = mobx; 
const {observer, inject, Provider} = mobxReact; 
const {Component} = React; 
const {render} = ReactDOM 
class AppState { 
    @observable authenticated = false; 
    @observable authenticating = false; 
} 

class Store2 { 
    @observable blah = false; 
} 

function Protected(Component) { 
    @inject("appState") 
    @observer 
    class AuthenticatedComponent extends Component { 
     render() { 
      const { authenticated, authenticating } = this.props.appState; 
      return (
       <div className="authComponent"> 
        {authenticated 
         ? <Component {...this.props} /> 
         : !authenticating && !authenticated 
           ? <p> redirect</p> 
           : null} 
       </div> 
      ); 
     } 
    } 
    return AuthenticatedComponent; 
} 


@inject("s2") 
@Protected 
@observer 
class Comp extends Component { 
    componentDidMount() { 
     console.log('mount'); 
    } 

    render() { 
     return (
      <p>blabla</p> 
     ) 
    } 
} 

const appS = new AppState(); 
const s2 = new Store2(); 

render(
    <Provider appState={appS} s2={s2}> 
     <Comp /> 
    </Provider>, 
    document.getElementById("app") 
) 

protégée DiC permet de vérifier si l'utilisateur est autorisé ou non.

Le problème est que si @inject est externe de Protected - componentDidMount se déclenchera (une fois sinon auth, et deux fois si authentifié). Et si je mets Protected comme décorateur extérieur, il semble fonctionner comme prévu mais produire un avertissement

You are trying to use 'observer' on a component that already has 'inject'.

Quelle est la bonne façon de gérer cela?

Answer 1

Dans la fonction Protégé je redéfinissais React.Component par l'argument de fonction Component, alors j'étendais argument, pas React.Component. Solution -> Renommer l'argument Composant-> Enfants

function Protected(Children) { 
    @inject("appState") 
    @observer 
    class AuthenticatedComponent extends Component { 
     render() { 
      const { authenticated, authenticating } = this.props.appState; 
      return (
       <div className="authComponent"> 
        {authenticated 
         ? <Children {...this.props} /> 
         : !authenticating && !authenticated 
           ? <p> redirect</p> 
           : null} 
       </div> 
      ); 
     } 
    } 
    return AuthenticatedComponent; 
}