9859

Mobx Inject, Observer and HoC together

Question:

Here a code that i have <a href="https://jsfiddle.net/v0592ua1/1/" rel="nofollow">https://jsfiddle.net/v0592ua1/1/</a>

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 ?

redirect

: null} </div> ); } } return AuthenticatedComponent; } @inject("s2") @Protected @observer class Comp extends Component { componentDidMount() { console.log('mount'); } render() { return (

blabla

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

Protected HoC is for checking if user is authorized or not.

The problem is that if @inject is outer of Protected - componentDidMount will trigger (once if not auth, and twice if authenticated). And if i put Protected as outside decorator it seems to work as expected but produce a warning

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

What is a proper way to handle this?

Answer1:

In function Protected i was redefining React.Component by function argument Component, then i was extending argument, not React.Component. Solution -> rename argument Component-> Children

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 ?

redirect

: null} </div> ); } } return AuthenticatedComponent; }

Recommend

  • UNEXPECTED TOP-LEVEL EXCEPTION: in Android Studio
  • how can i convert frm php to c# or json (extjs)
  • firebase database order by value working wrong
  • How to define a protocol with an array of a protocol with an associated type
  • Issue in implementing the Ngrx Store service into my component
  • Disable Clock App in Windows 6.5
  • Get the value from HTML form using jquery
  • Oauth Twitter and Facebook Apps within iframes
  • WCF Service Authentication from MVC App sharing same Membership Provider
  • Jenkins CLI Authentication
  • Writing a batch file that enters a password when prompted
  • NullInjectorError: No provider for ReducerManager
  • HTTP 401 Fog::Storage::Rackspace::ServiceError
  • Authenticate windows Identity with Outlook credentials
  • Stop tramp from opening remote directories when using ido-mode
  • Unable to get Google OAuth authentication working with React Native and Firebase
  • Best practices for storing sensitive information in source code
  • Is Firebase really Secure?
  • How to pass some more parameters to token endpoint web api 2
  • How to limit cursor movement in WPF based app?
  • How to do popup on new site for 301 redirected users?
  • $this->params returns null in cakephp model
  • JPA/Hibernate - Entity name seems to be important. If I rename to “Bob” works fine
  • Zend framework 2 : Add different authentication adapter for two different modules
  • Spring security - same page to deliver different content based on user role
  • Autofac with Web API 2 - Parameter-less constructor error
  • Laravel: Getting Session ID oddly truncates when using foreach
  • Bypass multiple inheritance in Java
  • Test if a set exists before trying to drop it
  • Recording logins for password protected directories
  • how to do an event when i swipe from fragment to the other
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?