MST integration - views

[Baael]

Is there any way to observe computed values / views from MST? like

const Store = types.model({
  nodes: types.array(Node)
})
.views(self => ({
  get activeNodes() {
    return self.nodes.filter( node => node.isActive )
  }
}))

const App = () => (
  <div>
    { map(store.activeNodes, node => <SomeComponent node={node} />) }
  </div>
)

render(App, document.body);

It seems it is not obtaining administration from it.

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, 
in: 'Reaction[Autorun@8017]' TypeError: Cannot read property 'atom' of undefined

[ryansolid]

Hmm.. honestly I have no idea. I've never used MST. I'm just assuming observable array here for input. The error sounds like it's coming from some internal that is getting used I guess in an incorrect way as the term atom I don't believe is used directly in MobX-JSX. In all honesty I'm not really sure what would be causing this and I'm unsure when I'm going to look into MST specifically. Help much wanted.

[mweststrate]

Sounds like a bug that was fixed in the MobX 5.15.6

[ryansolid]

Thanks. @Baael can you retry with the latest?

[Baael]

@ryansolid unfortunately not working, reason is view getter is returning plain array in this case. I am investigating it, however I have no idea at all how to get administration from it :P For now I used observable values with .extend method.

[ryansolid]

I need to track something reactive. I changed this library to only work with observable array. But I added another mode to handle this (v0.12.2). Given the multitude of ways you can return an array.. property access or boxed value or observable array itself, I'm going to allow map to take a function that does the reactive access.. So if are tracking a plain array as a property on your observable you'd do this:

map(() => obsv.list, (item) => <li>{item.something{</li>)

Notice the difference between observable array: https://codesandbox.io/s/mobx-simple-todos-cp6kw

Plain array: https://codesandbox.io/s/mobx-simple-todos-boxed-vjwju

@Baael does that help?

[Baael]

@ryansolid sorry I wasn't available for a week, I will check it. This idea looks good and should work, thank you! This library with the nice way of defining data structure in MST may be a game changer for many of my projects.