{"action":"created","issue":{"url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/26","repository_url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch","labels_url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/26/comments","events_url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/26/events","html_url":"https://github.com/kellyrmilligan/react-router-fetch/issues/26","id":293222959,"number":26,"title":"Component updates when isAppFetching is true","user":{"login":"webbygregg","id":34089735,"avatar_url":"https://avatars1.githubusercontent.com/u/34089735?v=4","gravatar_id":"","url":"https://api.github.com/users/webbygregg","html_url":"https://github.com/webbygregg","followers_url":"https://api.github.com/users/webbygregg/followers","following_url":"https://api.github.com/users/webbygregg/following{/other_user}","gists_url":"https://api.github.com/users/webbygregg/gists{/gist_id}","starred_url":"https://api.github.com/users/webbygregg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webbygregg/subscriptions","organizations_url":"https://api.github.com/users/webbygregg/orgs","repos_url":"https://api.github.com/users/webbygregg/repos","events_url":"https://api.github.com/users/webbygregg/events{/privacy}","received_events_url":"https://api.github.com/users/webbygregg/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-01-31T16:26:06Z","updated_at":"2018-02-01T05:25:23Z","closed_at":"2018-02-01T05:25:23Z","author_association":"NONE","body":"Would love some help with this, been stuck for 2 days. \r\n\r\nI am using the examples in the readme and they work fine returning the timeout promise but as soon as I add a dispatch action, the next component loads before isAppFetching is false.  I checked and my dispatch is definitely returning a promise. \r\n\r\nMy code: \r\n\r\nclient.js\r\n```\r\nimport 'babel-polyfill';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { renderRoutes } from 'react-router-config';\r\nimport routes from '../common/config/routes';\r\nimport { BrowserRouter as Router } from 'react-router-dom';\r\nimport storeFactory from '../common/store';\r\nimport { Provider } from 'react-redux';\r\nimport { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';\r\nimport th from '../common/config/theme';\r\nimport Reboot from 'material-ui/Reboot';\r\nimport '../common/sass/styles.scss';\r\nimport 'typeface-roboto';\r\n\r\nconst initialState = window.__PRELOADED_STATE__ || {};\r\ndelete window.__PRELOADED_STATE__;\r\n\r\nconst theme = createMuiTheme(th);\r\n\r\nconst store = storeFactory(initialState);\r\n\r\nReactDOM.hydrate(\r\n  <Provider store={store}>\r\n    <MuiThemeProvider theme={theme}>\r\n      <Reboot />\r\n      <Router>\r\n        {renderRoutes(routes)}\r\n      </Router>\r\n    </MuiThemeProvider>\r\n  </Provider>,\r\n  document.getElementById('root')\r\n);\r\n```\r\nApp.js\r\n\r\n```\r\nimport {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport { renderRoutes } from 'react-router-config';\r\nimport reactRouterFetch from 'react-router-fetch';\r\nimport routes from '../config/routes';\r\n\r\nclass App extends Component {\r\n\r\n  state = {\r\n    isAppFetching: false,\r\n    appFetchingError: null\r\n  }\r\n\r\n  componentDidMount(){\r\n    const jssStyles = document.getElementById('jss-server-side');\r\n    if (jssStyles && jssStyles.parentNode) {\r\n      jssStyles.parentNode.removeChild(jssStyles);\r\n    }\r\n    this.fetchRoutes(this.props);\r\n  }\r\n\r\n  componentWillReceiveProps (nextProps) {\r\n    const current = `${this.props.location.pathname}${this.props.location.search}`;\r\n    const next = `${nextProps.location.pathname}${nextProps.location.search}`;\r\n    if (current === next) {\r\n      return;\r\n    }\r\n    this.fetchRoutes(nextProps);\r\n  }\r\n\r\n  shouldComponentUpdate (nextProps, nextState) {\r\n    console.info('Should Update', !nextState.isAppFetching);\r\n    return false;//!nextState.isAppFetching;\r\n  }\r\n\r\n  fetchRoutes (props) {\r\n    const { dispatch, location } = props;\r\n    this.setState({\r\n      isAppFetching: true,\r\n      appFetchingError: null\r\n    });\r\n\r\n    reactRouterFetch(routes, location, { dispatch })\r\n      .then(() => {\r\n        this.setState({\r\n          isAppFetching: false\r\n        });\r\n      })\r\n      .catch((err) => {\r\n        this.setState({\r\n          isAppFetching: false,\r\n          appFetchingError: err\r\n        });\r\n      });\r\n  }\r\n\r\n  render () {\r\n    const {route} = this.props;\r\n    return (\r\n      renderRoutes(route.routes)\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect()(App);\r\n\r\n```\r\nFootball.js\r\n\r\n```\r\nimport React, {Component} from 'react';\r\nimport {fetchLeagueCountriesIfNeeded} from '../../actions';\r\n\r\nclass Football extends Component {\r\n  static fetch (match, location, {dispatch}) {\r\n    return dispatch(fetchLeagueCountriesIfNeeded());\r\n  }\r\n  render () {\r\n    return (\r\n      <div>Home</div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default Football;\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/comments/362162415","html_url":"https://github.com/kellyrmilligan/react-router-fetch/issues/26#issuecomment-362162415","issue_url":"https://api.github.com/repos/kellyrmilligan/react-router-fetch/issues/26","id":362162415,"user":{"login":"webbygregg","id":34089735,"avatar_url":"https://avatars1.githubusercontent.com/u/34089735?v=4","gravatar_id":"","url":"https://api.github.com/users/webbygregg","html_url":"https://github.com/webbygregg","followers_url":"https://api.github.com/users/webbygregg/followers","following_url":"https://api.github.com/users/webbygregg/following{/other_user}","gists_url":"https://api.github.com/users/webbygregg/gists{/gist_id}","starred_url":"https://api.github.com/users/webbygregg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webbygregg/subscriptions","organizations_url":"https://api.github.com/users/webbygregg/orgs","repos_url":"https://api.github.com/users/webbygregg/repos","events_url":"https://api.github.com/users/webbygregg/events{/privacy}","received_events_url":"https://api.github.com/users/webbygregg/received_events","type":"User","site_admin":false},"created_at":"2018-02-01T05:25:23Z","updated_at":"2018-02-01T05:25:23Z","author_association":"NONE","body":"Thank you, I stripped everything down and got it working with your code and even with my original actions,  so there must be an issue elsewhere. I am thinking maybe Material-UI HOC's \r\n\r\nI will add things back one by one and post my findings in case anyone else has issues.\r\n\r\nI really appreciate your help."}}
{"actor":{"display_login":"webbygregg"}}