{"action":"created","issue":{"url":"https://api.github.com/repos/Yomguithereal/baobab/issues/157","labels_url":"https://api.github.com/repos/Yomguithereal/baobab/issues/157/labels{/name}","comments_url":"https://api.github.com/repos/Yomguithereal/baobab/issues/157/comments","events_url":"https://api.github.com/repos/Yomguithereal/baobab/issues/157/events","html_url":"https://github.com/Yomguithereal/baobab/issues/157","id":66666534,"number":157,"title":"Using without mixin (with 0.13 classes)","user":{"login":"natew","id":12100,"avatar_url":"https://avatars.githubusercontent.com/u/12100?v=3","gravatar_id":"","url":"https://api.github.com/users/natew","html_url":"https://github.com/natew","followers_url":"https://api.github.com/users/natew/followers","following_url":"https://api.github.com/users/natew/following{/other_user}","gists_url":"https://api.github.com/users/natew/gists{/gist_id}","starred_url":"https://api.github.com/users/natew/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/natew/subscriptions","organizations_url":"https://api.github.com/users/natew/orgs","repos_url":"https://api.github.com/users/natew/repos","events_url":"https://api.github.com/users/natew/events{/privacy}","received_events_url":"https://api.github.com/users/natew/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Yomguithereal/baobab/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-04-06T17:59:05Z","updated_at":"2015-04-08T06:37:06Z","closed_at":null,"body":"Just wondering, I'm working on reapp-kit which uses immutable js and fynx currently which gives me some cool cursor functionality, but I like Baobab where you can define inside your component the data you want, and it handles refreshing it for you. I think I could implement this not too hard with Fynx.\r\n\r\nAnyway I'm using a new pattern in my app where I have a parent fetcher component that passes data as props:\r\n\r\n```\r\n<Store fetch={{ item: ['items', id] }})>\r\n  <Component />\r\n</Store>\r\n```\r\n\r\nSo Component now gets `this.props.item` from the cursor `['items', id]`. One problem is using this with shouldComponentUpdate is tricky. If your parent component doesn't rely on the same cursor, it won't update, so it won't pass down the props. I guess the next step would be to have Store component listen and do a forceUpdate, not sure if that would work.\r\n\r\nAnyway I think a Higher Order Component helper would be nice so in the Component file you'd write:\r\n\r\n```\r\nimport Cursor from 'baobob';\r\n\r\nclass Component extends React.Component { }\r\n\r\nexport default Cursor({ item: ['items', id] }, Component);\r\n```\r\n\r\nThen you could have Cursor do a forceUpdate when store updates, which work no matter where in the tree you put the component.\r\n\r\nI didn't see any discussion here on HOC or non-mixin usage, is it possible to do this? Any plans?"},"comment":{"url":"https://api.github.com/repos/Yomguithereal/baobab/issues/comments/90820367","html_url":"https://github.com/Yomguithereal/baobab/issues/157#issuecomment-90820367","issue_url":"https://api.github.com/repos/Yomguithereal/baobab/issues/157","id":90820367,"user":{"login":"christianalfoni","id":3956929,"avatar_url":"https://avatars.githubusercontent.com/u/3956929?v=3","gravatar_id":"","url":"https://api.github.com/users/christianalfoni","html_url":"https://github.com/christianalfoni","followers_url":"https://api.github.com/users/christianalfoni/followers","following_url":"https://api.github.com/users/christianalfoni/following{/other_user}","gists_url":"https://api.github.com/users/christianalfoni/gists{/gist_id}","starred_url":"https://api.github.com/users/christianalfoni/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/christianalfoni/subscriptions","organizations_url":"https://api.github.com/users/christianalfoni/orgs","repos_url":"https://api.github.com/users/christianalfoni/repos","events_url":"https://api.github.com/users/christianalfoni/events{/privacy}","received_events_url":"https://api.github.com/users/christianalfoni/received_events","type":"User","site_admin":false},"created_at":"2015-04-08T06:37:06Z","updated_at":"2015-04-08T06:37:06Z","body":"Though might be an idea to separate creating a cursor and creating a Component wrapper. So:\r\n\r\n```js\r\nvar tree = new Baobab({\r\n  foo: 'bar'\r\n});\r\nvar cursor = tree.select('foo');\r\n\r\nclass FooContainer extends Baobab.Component {\r\n  constructor() {\r\n    this.cursors = {\r\n      foo: 'foo'\r\n    };\r\n    super(); // Adds listeners etc.\r\n  }\r\n  // Render is in Baobab.Component, but looks like this\r\n  render () {\r\n    return this.props.children;\r\n  }\r\n}\r\n\r\n<FooContainer>\r\n  <MyComponent/>\r\n</FooContainer>\r\n```"}}