SukantGujar
commented
7 years ago Added a very quick and dirty example integration of nx-observe with React.
There are few things about integrating React with libraries like mobx and now nx-observe that are conceptually against some core React principles.
The first principle is to never update props directly. A React component should not mutate its props data as its an input to the component from parent. Popular implementations like redux, reflux etc. have well defined reducers or action handlers which take care of mutation. However with an observable store, every component can directly observe only those props its interested in and has the potential to make modifications to it. In fact as the data is mutable, it should make the changes. I would recommend passing an observable Store with mutation APIs which the components can invoke, rather than directly mutating the json. I will rework the code to give an example.
The second principle is to not invoke render directly. Ideally React manages all render invocations itself. However, both Mobx and nx-observe must allow easy updates to the components observing the store. To do this, Mobx provides a higher order component called observer which internally invokes render of the wrapped component once so that it can track the references observables in it. It is effective, but I somehow find this approach not very elegant (but hey the library is very popular and fast so they must have done this with a lot of thought). I think higher order components can be one way to solve this without invoking render directly. In the code, I have attempted a simple HOC observercomponent which does just this.
solkimicreb
kamicane
Hi!
Would anyone be interested in doing this. I would put it into a separate repo (like mobx and react-mobx) to keep nx-observe framework independent. If nobody is interested I will try to do it, but I am pretty much a React newbie.