Using ViewModel with Higher Order Components (HOC)

[davidsavoie1]

Good day! I'm trying to integrate routing in my application and I really liked the approach of router5. When used with React, it is recommended (necessary?) to use react-router5. This package includes Higer Order Components (HOC) such as routeNode which adds props router, route and previousRoute to the component passed as a parameter.

I tried to use this with ViewModel like so:

Main({
  render() {},
  ...
});
export default routeNode('main')(Main);

I changed my import statement to use absolute import:

import Main from './Main/Main';

It seems to be working at first. If I call this.router() or this.route() in my VM component, I do get an answer back, which I can use to control what to display... If I change url path manually, the page reloads (which is normal) and again, the view adjusts to the new url. However, if I change URL with the router method (ie this.router().navigate('login')), the page is not reloaded completely (that's the point!) and unfortunately the props don't update, so nothing changes.

I know this could be a Router5 issue or something I'm doing wrong, but I'm asking here if it's possible to use ViewModel components with HOC as I've done here. Otherwise, I'll have to find another... route 😉!

[ManuelDeLeon]

Make me a simple repro and I'll take a look.

[davidsavoie1]

Here it is!

If you click on a button, the router does respond correctly. The URL changes and we see in the console that the router transitions are successful. However, nothing changes in what is displayed (the title is supposed to change) and nothing gets logged to the console from autorun. If however you click on a button that points to a different URL and then reload the page, the view gets updated correctly.

What router do you use in your projects? React Router v4 seems a little complex for my needs and preferences and FlowRouter doesn't seem to be supported anymore.

[ManuelDeLeon]

I'll check it out later on when I have time. Meanwhile, I've used react router v3, dunno about v4. Here's the sample project I always use.

[davidsavoie1]

I just tried React Router v4 and I get the same type of problems. Here's another repo to try out. I compare the exact same components using regular React and ViewModel-React, exposing a simple render function. Nothing fancy. I just copied the basic example from React Router documentation.

When I click on any link, the URL changes and the React component updates, but not the VM one. The VM component updates only if the page is refreshed. I guess it's a similar problem, with VM components being wrapped in other regular ones.

By the way, could you please explain how a VM component is defined and exported? Each time I write something like Commponent({ ViewModel definition... }), I don't really understand what I'm actually defining. In this case, Component is not a variable nor a function definition. It looks more like a function call with an object parameter, but how and where is this Component function defined?

Also, what's the actual relation to the folder name, since calling direct children components doesn't require importing them if they are in nested folders with the same name?

ViewModel has one convention, if the component is located in a sub-folder of the same name (like Person) then you can omit the import.

Thanks for your time.

[davidsavoie1]

For the record, I went with Universal-Router combined with History. It works really well so far and the interaction with ViewModel seems great!

I'd still be curious what went wrong with the others... And to get info on my imports question above!

Thanks a lot!