{"action":"closed","issue":{"url":"https://api.github.com/repos/erikras/react-redux-universal-hot-example/issues/827","labels_url":"https://api.github.com/repos/erikras/react-redux-universal-hot-example/issues/827/labels{/name}","comments_url":"https://api.github.com/repos/erikras/react-redux-universal-hot-example/issues/827/comments","events_url":"https://api.github.com/repos/erikras/react-redux-universal-hot-example/issues/827/events","html_url":"https://github.com/erikras/react-redux-universal-hot-example/issues/827","id":126736509,"number":827,"title":"Content loads on the client the first time, but then never again.","user":{"login":"brandondurham","id":250210,"avatar_url":"https://avatars.githubusercontent.com/u/250210?v=3","gravatar_id":"","url":"https://api.github.com/users/brandondurham","html_url":"https://github.com/brandondurham","followers_url":"https://api.github.com/users/brandondurham/followers","following_url":"https://api.github.com/users/brandondurham/following{/other_user}","gists_url":"https://api.github.com/users/brandondurham/gists{/gist_id}","starred_url":"https://api.github.com/users/brandondurham/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brandondurham/subscriptions","organizations_url":"https://api.github.com/users/brandondurham/orgs","repos_url":"https://api.github.com/users/brandondurham/repos","events_url":"https://api.github.com/users/brandondurham/events{/privacy}","received_events_url":"https://api.github.com/users/brandondurham/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-14T20:00:02Z","updated_at":"2016-01-20T08:25:23Z","closed_at":"2016-01-20T08:25:23Z","body":"I’m using the following code to load an article from an API based on the `name` param from the route:\r\n\r\nThe URL:\r\n```\r\nhttp://localhost:3000/2015/12/31/the-name-of-the-article\r\n```\r\n\r\nThe route:\r\n```javascript\r\n<Route path=\"/:year/:month/:day/:name\" component={Article}/>\r\n```\r\n\r\nThe `<Article/>` Component\r\n```javascript\r\nimport React, { Component, PropTypes } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport Helmet from 'react-helmet';\r\nimport ReactDisqusThread from 'react-disqus-thread';\r\nimport classNames from 'classnames';\r\nimport Loader from 'react-loader';\r\nimport connectData from 'helpers/connectData';\r\nimport { connect } from 'react-redux';\r\nimport { isLoaded as articleLoaded, load as loadArticle} from 'redux/modules/article';\r\nimport { isLoaded as mostPopularLoaded, load as loadMostPopular } from 'redux/modules/mostPopular';\r\n\r\nimport { checkAspectRatio } from 'utils';\r\n\r\nimport {\r\n\tAd,\r\n\tMetaBar,\r\n\tMostPopular,\r\n\tHeaderTab,\r\n\tShareTools,\r\n\tCommentCount,\r\n\tMoreArticles\r\n} from 'components';\r\n/* eslint id-length: 0 */\r\nimport _ from 'lodash';\r\nimport $ from 'jquery';\r\n\r\nfunction fetchDataDeferred(getState, dispatch) {\r\n\tconst state = getState();\r\n\r\n\tif (!articleLoaded(state)) {\r\n\t\treturn dispatch(loadArticle(state.router.params.name));\r\n\t}\r\n}\r\n\r\n@connectData(null, fetchDataDeferred)\r\n@connect(\r\n\tstate => ({\r\n\t\tarticle: state.article.data,\r\n\t\tarticleError: state.article.error,\r\n\t\tloading: state.article.loading\r\n\t}))\r\n\r\nexport default class Articles extends Component {\r\n\tstatic propTypes = {\r\n\t\tarticle: PropTypes.object,\r\n\t\tarticleError: PropTypes.object,\r\n\t\tloading: PropTypes.bool,\r\n\t\tlocation: PropTypes.object,\r\n\t\tparams: PropTypes.object\r\n\t}\r\n\r\n\tstatic contextTypes = {\r\n\t\tstore: PropTypes.object.isRequired\r\n\t};\r\n\r\n\tcomponentDidMount() {\r\n\t\tconst _this = this;\r\n\r\n\t\t// Load article\r\n\t\tif (!articleLoaded(this.context.store.getState())) {\r\n\t\t\tthis.context.store.dispatch(loadArticle(this.props.params.name));\r\n\t\t}\r\n\t}\r\n\r\n\tstatic fetchData(getState, dispatch) {\r\n\t\tconst promises = [];\r\n\t\tconst state = getState();\r\n\r\n\t\tif (!mostPopularLoaded(state)) {\r\n\t\t\tpromises.push(dispatch(loadMostPopular()));\r\n\t\t}\r\n\r\n\t\treturn Promise.all(promises);\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst styles = require('./Article.css');\r\n\r\n\t\t// Show loading spinner while article is fetched\r\n\t\tif (this.props.loading || this.props.loading === undefined) {\r\n\t\t\treturn (\r\n\t\t\t\t<main className={styles.Base}>\r\n\t\t\t\t\t<Loader\r\n\t\t\t\t\t\tclassName=\"spinner\"\r\n\t\t\t\t\t\tcolor=\"rgb(255, 78, 61)\"\r\n\t\t\t\t\t\tcorners={0}\r\n\t\t\t\t\t\tdirection={1}\r\n\t\t\t\t\t\thwaccel\r\n\t\t\t\t\t\tleft=\"50%\"\r\n\t\t\t\t\t\tlength={6}\r\n\t\t\t\t\t\tlines={13}\r\n\t\t\t\t\t\tloaded={this.state.loaded}\r\n\t\t\t\t\t\topacity={0.1}\r\n\t\t\t\t\t\tradius={7}\r\n\t\t\t\t\t\trotate={13}\r\n\t\t\t\t\t\tscale={1.00}\r\n\t\t\t\t\t\tshadow={false}\r\n\t\t\t\t\t\tspeed={2}\r\n\t\t\t\t\t\ttop=\"50%\"\r\n\t\t\t\t\t\ttrail={60}\r\n\t\t\t\t\t\twidth={2}\r\n\t\t\t\t\t\tzIndex={2e9} />\r\n\t\t\t\t</main>\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tconst {\r\n\t\t\tarticle,\r\n\t\t\tlocation\r\n\t\t} = this.props;\r\n\r\n\t\treturn (\r\n\t\t\t// Content here…\r\n\t\t);\r\n\t}\r\n}\r\n```\r\n\r\nWhen navigating to this page from another it loads perfectly (and quickly!) the first time, but if I click on any other article it loads the first one again from memory. It's not until I refresh the page that I see the article that _should_ have loaded.\r\n\r\nI suspect this has something to do with the previous article not being unloaded and `articleLoaded(this.context.store.getState())` always being true after the first load.\r\n\r\nI know this is likely because of some lack of foresight on my part. Do you see anything in my code that looks wrong, is missing, or might be causing the issue? I really appreciate any help I can get."}}