{"action":"created","issue":{"url":"https://api.github.com/repos/salsita/redux-elm/issues/27","repository_url":"https://api.github.com/repos/salsita/redux-elm","labels_url":"https://api.github.com/repos/salsita/redux-elm/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/salsita/redux-elm/issues/27/comments","events_url":"https://api.github.com/repos/salsita/redux-elm/issues/27/events","html_url":"https://github.com/salsita/redux-elm/issues/27","id":158911658,"number":27,"title":"usage with react-router-redux","user":{"login":"jmarceli","id":4281333,"avatar_url":"https://avatars.githubusercontent.com/u/4281333?v=3","gravatar_id":"","url":"https://api.github.com/users/jmarceli","html_url":"https://github.com/jmarceli","followers_url":"https://api.github.com/users/jmarceli/followers","following_url":"https://api.github.com/users/jmarceli/following{/other_user}","gists_url":"https://api.github.com/users/jmarceli/gists{/gist_id}","starred_url":"https://api.github.com/users/jmarceli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jmarceli/subscriptions","organizations_url":"https://api.github.com/users/jmarceli/orgs","repos_url":"https://api.github.com/users/jmarceli/repos","events_url":"https://api.github.com/users/jmarceli/events{/privacy}","received_events_url":"https://api.github.com/users/jmarceli/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-06-07T12:34:30Z","updated_at":"2016-06-09T10:41:22Z","closed_at":null,"body":"Hi, I really like this redux implementation it is really clean and well documented. Anyway I have a problem with routing. How should I refactor the code to get `react-router-redux` support?\r\n\r\nI come up with the following solution:\r\n**src/boilerplate.js**\r\n```\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport { createStore, compose } from 'redux';\r\nimport { Provider, connect } from 'react-redux';\r\nimport reduxElm from 'redux-elm';\r\nimport { Router, Route, browserHistory } from 'react-router'; // added\r\nimport { syncHistoryWithStore } from 'react-router-redux'; // added\r\nimport Hello from './hello-world/view'; // added\r\n\r\nexport default (containerDomId, View, updater) => {\r\n  const storeFactory = compose(\r\n    reduxElm,\r\n    window.devToolsExtension ? window.devToolsExtension() : f => f\r\n  )(createStore);\r\n\r\n  const store = storeFactory(updater);\r\n\r\n  const history = syncHistoryWithStore(browserHistory, store); // added\r\n\r\n  const ConnectedView = connect(appState => ({\r\n    model: appState\r\n  }))(View);\r\n\r\n  render((\r\n    <Provider store={store}>\r\n      { /* I wrap ConnectedView inside Router but I'm not sure if it is a good idea */ }\r\n      <Router history={history}>\r\n        <Route path=\"/\" component={ConnectedView}>\r\n          <Route path=\"/hello\" component={Hello} />\r\n        </Route>\r\n      </Router>\r\n    </Provider>\r\n  ), document.getElementById(containerDomId));\r\n}\r\n```\r\n\r\n**src/home/updater.js** (it is my main application parte executed from `main.js`)\r\n```\r\nimport { Updater, Matchers } from 'redux-elm';\r\nimport gifViewerUpdater, { init as gifViewerInit } from '../gif-viewer/updater';\r\nimport { routerReducer } from 'react-router-redux';\r\n\r\nexport const initialModel = {\r\n  globalCounter: 0,\r\n  routing: routerReducer()\r\n};\r\n\r\nexport default new Updater(initialModel)\r\n  .case('Increment', model => model + 1)\r\n  .toReducer();\r\n```\r\n\r\nBut it doesn't work. Well it works (actions are dispatched), but  my app is always on the first page `home`.\r\nI would appreciate any ideas on how to make routing work."},"comment":{"url":"https://api.github.com/repos/salsita/redux-elm/issues/comments/224859745","html_url":"https://github.com/salsita/redux-elm/issues/27#issuecomment-224859745","issue_url":"https://api.github.com/repos/salsita/redux-elm/issues/27","id":224859745,"user":{"login":"tomkis1","id":5079224,"avatar_url":"https://avatars.githubusercontent.com/u/5079224?v=3","gravatar_id":"","url":"https://api.github.com/users/tomkis1","html_url":"https://github.com/tomkis1","followers_url":"https://api.github.com/users/tomkis1/followers","following_url":"https://api.github.com/users/tomkis1/following{/other_user}","gists_url":"https://api.github.com/users/tomkis1/gists{/gist_id}","starred_url":"https://api.github.com/users/tomkis1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomkis1/subscriptions","organizations_url":"https://api.github.com/users/tomkis1/orgs","repos_url":"https://api.github.com/users/tomkis1/repos","events_url":"https://api.github.com/users/tomkis1/events{/privacy}","received_events_url":"https://api.github.com/users/tomkis1/received_events","type":"User","site_admin":false},"created_at":"2016-06-09T10:41:22Z","updated_at":"2016-06-09T10:41:22Z","body":"Hello, I am really glad that you like it!\r\n\r\nSo here's the idea:\r\n\r\nYour root view would look like this:\r\n\r\n```javascript\r\nimport { view } from 'redux-elm';\r\n\r\nimport buildRouting from './buildRouting';\r\n\r\nexport default view(({ history }) => buildRouting(history));\r\n```\r\n\r\nAnd the implementation of `buildRouting` is pretty straightforward:\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { forwardTo } from 'redux-elm';\r\nimport { Router, Route, IndexRoute } from 'react-router';\r\n\r\nimport Template from '../../template/template';\r\nimport CounterView from '../counter/counterView';\r\nimport AsyncView from '../async/asyncView';\r\n\r\nconst connectView = (View, modelKey, ...nesting) =>\r\n  connect(appState => ({ model: appState.root[modelKey] }))(\r\n    props => <View {...props} dispatch={forwardTo(props.dispatch, ...nesting)} />);\r\n\r\nconst ConnectedCounterView = connectView(CounterView, 'counter', 'Counter');\r\nconst ConnectedAsyncView = connectView(AsyncView, 'async', 'Async');\r\n\r\nexport default history => (\r\n  <Router history={history}>\r\n    <Route path=\"/\" component={Template}>\r\n      <IndexRoute component={ConnectedCounterView} />\r\n      <Route path=\"counter\" component={ConnectedCounterView} />\r\n      <Route path=\"async\" component={ConnectedAsyncView} />\r\n    </Route>\r\n  </Router>\r\n);\r\n```\r\n\r\ndon't forget to modify boilerplate.js:\r\n\r\n```\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport { createStore, compose } from 'redux';\r\nimport { Provider, connect } from 'react-redux';\r\nimport reduxElm from 'redux-elm';\r\nimport { browserHistory } from 'react-router';\r\nimport { syncHistoryWithStore } from 'react-router-redux';\r\n\r\nexport default (containerDomId, View, updater) => {\r\n  const storeFactory = compose(\r\n    reduxElm,\r\n    window.devToolsExtension ? window.devToolsExtension() : f => f\r\n  )(createStore);\r\n\r\n  const store = storeFactory(updater);\r\n  const history = syncHistoryWithStore(browserHistory, store);\r\n\r\n  const ConnectedView = connect(appState => ({\r\n    model: appState\r\n  }))(View);\r\n\r\n  render((\r\n    <Provider store={store}>\r\n      <ConnectedView history={history} />\r\n    </Provider>\r\n  ), document.getElementById(containerDomId));\r\n}\r\n```"}}
{"actor":{"display_login":"tomkis1"}}