{"action":"created","issue":{"url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/39","repository_url":"https://api.github.com/repos/tshaddix/react-chrome-redux","labels_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/39/labels{/name}","comments_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/39/comments","events_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/39/events","html_url":"https://github.com/tshaddix/react-chrome-redux/issues/39","id":197113499,"number":39,"title":"[Question] How to use this with react-router or react-router-redux?","user":{"login":"vanbosse","id":606803,"avatar_url":"https://avatars.githubusercontent.com/u/606803?v=3","gravatar_id":"","url":"https://api.github.com/users/vanbosse","html_url":"https://github.com/vanbosse","followers_url":"https://api.github.com/users/vanbosse/followers","following_url":"https://api.github.com/users/vanbosse/following{/other_user}","gists_url":"https://api.github.com/users/vanbosse/gists{/gist_id}","starred_url":"https://api.github.com/users/vanbosse/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vanbosse/subscriptions","organizations_url":"https://api.github.com/users/vanbosse/orgs","repos_url":"https://api.github.com/users/vanbosse/repos","events_url":"https://api.github.com/users/vanbosse/events{/privacy}","received_events_url":"https://api.github.com/users/vanbosse/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-12-22T07:43:49Z","updated_at":"2016-12-25T05:18:24Z","closed_at":null,"body":"Hi,\r\n\r\nI've setup an action to login a user after the login form was submitted. I've created a matching alias to have this async action of checking credentials happen in the background page. However, I'm using react-router and would like to \"redirect\" on a successful login. This happens by doing:\r\n\r\n```js\r\nimport { browserHistory } from 'react-router';\r\n\r\nbrowserHistory.push('<new-path-here>');\r\n```\r\n\r\nAs you might expect, having to setup the routing in the popup page (together with the browserHistory) we can't just access the same browserHistory object in the background page. Meaning that one cannot simply redirect a user after a successful login. See code example:\r\n\r\n```js\r\n// popup\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Provider } from 'react-redux';\r\nimport { Store } from 'react-chrome-redux';\r\nimport { Router, browserHistory } from 'react-router';\r\nimport { syncHistoryWithStore } from 'react-router-redux';\r\nimport getRoutes from './routes';\r\n\r\nconst store = new Store({\r\n    portName: 'xxx'\r\n});\r\n\r\nconst unsubscribe = store.subscribe(() => {\r\n    unsubscribe();\r\n    const history = syncHistoryWithStore(browserHistory, store);\r\n\r\n    ReactDOM.render(\r\n        <Provider store={store}>\r\n            <Router history={history}>\r\n                {getRoutes(store)}\r\n            </Router>\r\n        </Provider>,\r\n        document.querySelector('#app')\r\n    );\r\n});\r\n\r\n```\r\n\r\n```js\r\n// background\r\n\r\nimport firebase from 'firebase';\r\nimport { browserHistory } from 'react-router';\r\n\r\n// This is an aliased action executing from the background\r\n// with redux-thunk\r\nconst loginUser = () => {\r\n    return (dispatch) => {\r\n        firebase.auth().signInWithEmailAndPassword(email, password)\r\n            .then(user => {\r\n                dispatch({\r\n                    type: LOGIN_SUCCESS,\r\n                    payload: user\r\n                });\r\n\r\n                // Redirect here\r\n                // This won't work, because the browserHistory obviously differs\r\n                // from the one in the popup page.\r\n                browserHistory.push('/dashboard');\r\n        });\r\n    };\r\n};\r\n```\r\n\r\nI hope this is kind of clear? My question however is: is there a way this issue is supported by react-chrome-redux and am I just not seeing it? Or should I use messaging to send a message to my popup page saying: \"Hey, all is fine, you can redirect now using the correct browserHistory object\"?\r\n\r\nNote: don't mind missing imports and such, just assume everything works. I just want to figure out, how I can get back to the browserHistory in a neat way.\r\n\r\nThanks in advance!"},"comment":{"url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/comments/269110649","html_url":"https://github.com/tshaddix/react-chrome-redux/issues/39#issuecomment-269110649","issue_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/39","id":269110649,"user":{"login":"vhmth","id":603426,"avatar_url":"https://avatars.githubusercontent.com/u/603426?v=3","gravatar_id":"","url":"https://api.github.com/users/vhmth","html_url":"https://github.com/vhmth","followers_url":"https://api.github.com/users/vhmth/followers","following_url":"https://api.github.com/users/vhmth/following{/other_user}","gists_url":"https://api.github.com/users/vhmth/gists{/gist_id}","starred_url":"https://api.github.com/users/vhmth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vhmth/subscriptions","organizations_url":"https://api.github.com/users/vhmth/orgs","repos_url":"https://api.github.com/users/vhmth/repos","events_url":"https://api.github.com/users/vhmth/events{/privacy}","received_events_url":"https://api.github.com/users/vhmth/received_events","type":"User","site_admin":false},"created_at":"2016-12-25T05:18:24Z","updated_at":"2016-12-25T05:18:24Z","body":"@vanbosse I'm not super familiar with `react-router` (yet - we'll be using it extensively in the following months). Just commenting here so I can be subscribed to this thread. :-)"}}
{"actor":{"display_login":"vhmth"}}