{"action":"created","issue":{"url":"https://api.github.com/repos/addthis/fluxthis/issues/56","labels_url":"https://api.github.com/repos/addthis/fluxthis/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/addthis/fluxthis/issues/56/comments","events_url":"https://api.github.com/repos/addthis/fluxthis/issues/56/events","html_url":"https://github.com/addthis/fluxthis/issues/56","id":69969285,"number":56,"title":"add information on how to handle routing","user":{"login":"santihbc","id":2404757,"avatar_url":"https://avatars.githubusercontent.com/u/2404757?v=3","gravatar_id":"","url":"https://api.github.com/users/santihbc","html_url":"https://github.com/santihbc","followers_url":"https://api.github.com/users/santihbc/followers","following_url":"https://api.github.com/users/santihbc/following{/other_user}","gists_url":"https://api.github.com/users/santihbc/gists{/gist_id}","starred_url":"https://api.github.com/users/santihbc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/santihbc/subscriptions","organizations_url":"https://api.github.com/users/santihbc/orgs","repos_url":"https://api.github.com/users/santihbc/repos","events_url":"https://api.github.com/users/santihbc/events{/privacy}","received_events_url":"https://api.github.com/users/santihbc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-04-21T22:35:27Z","updated_at":"2015-04-22T03:49:48Z","closed_at":null,"body":"It would be great to document how routing is handled in AddThis. Routing is a topic where there is disagreement in the Flux community so setting a FluxThis way of doing it would round up a great documentation.\r\n\r\nI suggest having the router be a Store that only silently updates the browser URL when listening to specific actions but does fire an action itself on first load to inform what is the entry point URL (that is the only time a Store can fire an Action directly)"},"comment":{"url":"https://api.github.com/repos/addthis/fluxthis/issues/comments/95019338","html_url":"https://github.com/addthis/fluxthis/issues/56#issuecomment-95019338","issue_url":"https://api.github.com/repos/addthis/fluxthis/issues/56","id":95019338,"user":{"login":"mako-taco","id":2238381,"avatar_url":"https://avatars.githubusercontent.com/u/2238381?v=3","gravatar_id":"","url":"https://api.github.com/users/mako-taco","html_url":"https://github.com/mako-taco","followers_url":"https://api.github.com/users/mako-taco/followers","following_url":"https://api.github.com/users/mako-taco/following{/other_user}","gists_url":"https://api.github.com/users/mako-taco/gists{/gist_id}","starred_url":"https://api.github.com/users/mako-taco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mako-taco/subscriptions","organizations_url":"https://api.github.com/users/mako-taco/orgs","repos_url":"https://api.github.com/users/mako-taco/repos","events_url":"https://api.github.com/users/mako-taco/events{/privacy}","received_events_url":"https://api.github.com/users/mako-taco/received_events","type":"User","site_admin":false},"created_at":"2015-04-22T03:49:48Z","updated_at":"2015-04-22T03:49:48Z","body":"Here's koa routing w/ code splits\r\n```js\r\nRouter({\r\n\t// show a loading gif when changing routes if we are making requets\r\n\t*'*' (next) {\r\n\r\n\t\t// setReactClass is a private method of the router store,\r\n\t\t// calling it will update views\r\n\t\tthis.setReactClass(LoadingSpinner);\r\n\t\tyield next();\t\r\n\t},\r\n\r\n\t// Start loading the settings component ASAP. Yield it since we don't\r\n\t// want to do any rendering until we have it\r\n\t*'/settings/*' (next) {\r\n\t\tlet ctx = this;\r\n\t\t\r\n\t\tyield next();\r\n\t\t\r\n\t\tyield new Promise(resolve => {\r\n\t\t\trequire.ensure(['Settings'], () => {\r\n\t\t\t\tlet Settings = require('Settings');\r\n\t\t\t\tctx.setReactClass(Settings);\r\n\t\t\t\tresolve();\r\n\t\t\t});\r\n\t\t});\r\n\t},\r\n\r\n\t// replaces a users history and url with one that contains their ID\r\n\t*'/settings/user' () {\r\n\t\tthis.rewrite(`/settings/user/${UserStore.getUserID()}`);\r\n\t},\r\n\r\n\t// Hitting a route with variable params will also update the internal\r\n\t// router store.\r\n\t*'/settings/user/:user' (next) {\r\n\t\t// Kick off an ajax request. We don't neex to yield because our \r\n\t\t// view can handle rendering with some empty store values\r\n\t\tActionCreator.getUserSettings(this.params.user);\r\n\t}\r\n});\r\n\r\n// And then we expose a react class for people to render anywhere through\r\n// Router.Component or something. Here's what Router.Component would =\r\nReact.createClass({\r\n\tmixins: [Router.mixin],\r\n\r\n\tgetStateFromStores () {\r\n\t\tlet ReactClass = Router.getReactClass();\r\n\r\n\t\t// Any named route params become {param: value} props\r\n\t\tlet props = Router.getReactProps(); \r\n\r\n\t\treturn {\r\n\t\t\treactComponent: <ReactClass {...props}></ReactClass>\r\n\t\t}\r\n\t},\r\n\trender () {\r\n\t\treturn {this.state.reactComponent}\r\n\t}\r\n});\r\n```"}}