{"action":"created","issue":{"url":"https://api.github.com/repos/mobxjs/mobx/issues/300","repository_url":"https://api.github.com/repos/mobxjs/mobx","labels_url":"https://api.github.com/repos/mobxjs/mobx/issues/300/labels{/name}","comments_url":"https://api.github.com/repos/mobxjs/mobx/issues/300/comments","events_url":"https://api.github.com/repos/mobxjs/mobx/issues/300/events","html_url":"https://github.com/mobxjs/mobx/issues/300","id":158314913,"number":300,"title":"Importing store directly or pass as props?","user":{"login":"flipjs","id":8011958,"avatar_url":"https://avatars.githubusercontent.com/u/8011958?v=3","gravatar_id":"","url":"https://api.github.com/users/flipjs","html_url":"https://github.com/flipjs","followers_url":"https://api.github.com/users/flipjs/followers","following_url":"https://api.github.com/users/flipjs/following{/other_user}","gists_url":"https://api.github.com/users/flipjs/gists{/gist_id}","starred_url":"https://api.github.com/users/flipjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flipjs/subscriptions","organizations_url":"https://api.github.com/users/flipjs/orgs","repos_url":"https://api.github.com/users/flipjs/repos","events_url":"https://api.github.com/users/flipjs/events{/privacy}","received_events_url":"https://api.github.com/users/flipjs/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/mobxjs/mobx/labels/question","name":"question","color":"cc317c"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-06-03T08:19:25Z","updated_at":"2016-06-11T19:46:18Z","closed_at":"2016-06-04T17:47:13Z","body":"What's the consensus on accessing the store from inside the component? Do you access it directly using import or pass as props?\r\n\r\nImporting and accessing directly is very convenient, but how do you test it?\r\n\r\nI started a new project a few weeks ago using Redux, and have migrated to using MobX completely. I pass store as props for easier testing. I use a decorator to pass the store:\r\n\r\n```\r\nimport React from 'react'\r\nimport { observer } from 'mobx-react'\r\nimport store from '../store'\r\n\r\nfunction UserList (props) {\r\n  const {users} = props.store\r\n  return (\r\n    <ul>\r\n      {users.map(user => <li key={user.id}>{user.name}</li>)}\r\n    </ul>\r\n  )\r\n}\r\nUserList.propTypes = {\r\n  store: React.PropTypes.object\r\n}\r\n\r\nfunction injectStore (Component) {\r\n  return (() => <Component store={store} />)\r\n}\r\n\r\nexport default injectStore(observer(UserList))\r\n```\r\n\r\nMy store looks like this:\r\n\r\n```\r\nimport UiStore from './UiStore'\r\nimport UsersStore from './UsersStore'\r\nimport ArticlesStore from './ArticlesStore'\r\nimport OtherStore from './OtherStore'\r\n\r\nconst store = {\r\n  ui: new UiStore(),\r\n  users: new UsersStore(),\r\n  articles: new ArticlesStore(),\r\n  ...\r\n}\r\n\r\nexport default store\r\n```\r\n\r\nI have `injectStore()` stored somewhere so I just import it when I need to use the store. Do you think this is viable? Will there be implications of passing a big fat store? My application seems working fine with it, but I'm still on the early stage of development.\r\n\r\nI like the idea of importing the store directly, it just feels normal and straightforward. I'm just not sure how to test it and if its considered an anti-pattern.\r\n"},"comment":{"url":"https://api.github.com/repos/mobxjs/mobx/issues/comments/225390376","html_url":"https://github.com/mobxjs/mobx/issues/300#issuecomment-225390376","issue_url":"https://api.github.com/repos/mobxjs/mobx/issues/300","id":225390376,"user":{"login":"evankline","id":5659108,"avatar_url":"https://avatars.githubusercontent.com/u/5659108?v=3","gravatar_id":"","url":"https://api.github.com/users/evankline","html_url":"https://github.com/evankline","followers_url":"https://api.github.com/users/evankline/followers","following_url":"https://api.github.com/users/evankline/following{/other_user}","gists_url":"https://api.github.com/users/evankline/gists{/gist_id}","starred_url":"https://api.github.com/users/evankline/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/evankline/subscriptions","organizations_url":"https://api.github.com/users/evankline/orgs","repos_url":"https://api.github.com/users/evankline/repos","events_url":"https://api.github.com/users/evankline/events{/privacy}","received_events_url":"https://api.github.com/users/evankline/received_events","type":"User","site_admin":false},"created_at":"2016-06-11T19:46:18Z","updated_at":"2016-06-11T19:46:18Z","body":"@flipjs this is a good example of what you're setting out to accomplish: [ContextProvider & connect function](https://medium.com/@foxhound87/state-management-hydration-with-mobx-we-must-react-ep-05-1922a72453c6#.7gv5xwin7)"}}
{"actor":{"display_login":"evankline"}}