Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MST integration - views #28

Open
Baael opened this issue Sep 3, 2020 · 6 comments
Open

MST integration - views #28

Baael opened this issue Sep 3, 2020 · 6 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@Baael
Copy link

Baael commented Sep 3, 2020

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
@Baael Baael changed the title MST integration MST integration - views Sep 3, 2020
@ryansolid
Copy link
Owner

ryansolid commented Sep 7, 2020

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.

@ryansolid ryansolid added bug Something isn't working help wanted Extra attention is needed labels Sep 7, 2020
@mweststrate
Copy link

Sounds like a bug that was fixed in the MobX 5.15.6

@ryansolid
Copy link
Owner

Thanks. @Baael can you retry with the latest?

@Baael
Copy link
Author

Baael commented Sep 10, 2020

@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
Copy link
Owner

ryansolid commented Sep 11, 2020

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
Copy link
Author

Baael commented Sep 19, 2020

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants