{"action":"created","issue":{"url":"https://api.github.com/repos/zeit/next.js/issues/954","repository_url":"https://api.github.com/repos/zeit/next.js","labels_url":"https://api.github.com/repos/zeit/next.js/issues/954/labels{/name}","comments_url":"https://api.github.com/repos/zeit/next.js/issues/954/comments","events_url":"https://api.github.com/repos/zeit/next.js/issues/954/events","html_url":"https://github.com/zeit/next.js/issues/954","id":204773264,"node_id":"MDU6SXNzdWUyMDQ3NzMyNjQ=","number":954,"title":"Async mapStateToProps","user":{"login":"ghost","id":10137,"node_id":"MDQ6VXNlcjEwMTM3","avatar_url":"https://avatars3.githubusercontent.com/u/10137?v=4","gravatar_id":"","url":"https://api.github.com/users/ghost","html_url":"https://github.com/ghost","followers_url":"https://api.github.com/users/ghost/followers","following_url":"https://api.github.com/users/ghost/following{/other_user}","gists_url":"https://api.github.com/users/ghost/gists{/gist_id}","starred_url":"https://api.github.com/users/ghost/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ghost/subscriptions","organizations_url":"https://api.github.com/users/ghost/orgs","repos_url":"https://api.github.com/users/ghost/repos","events_url":"https://api.github.com/users/ghost/events{/privacy}","received_events_url":"https://api.github.com/users/ghost/received_events","type":"User","site_admin":false},"labels":[{"id":455907200,"node_id":"MDU6TGFiZWw0NTU5MDcyMDA=","url":"https://api.github.com/repos/zeit/next.js/labels/Type:%20Question","name":"Type: Question","color":"cc317c","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2017-02-02T03:25:06Z","updated_at":"2018-08-14T03:03:14Z","closed_at":"2017-02-03T16:43:35Z","author_association":"NONE","body":"What is not entirely clear to me in the \"with-redux\" example, how would I go about having an action dispatched on server render, that consists of thunks that fetch data from some api?\r\n"},"comment":{"url":"https://api.github.com/repos/zeit/next.js/issues/comments/412739061","html_url":"https://github.com/zeit/next.js/issues/954#issuecomment-412739061","issue_url":"https://api.github.com/repos/zeit/next.js/issues/954","id":412739061,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMjczOTA2MQ==","user":{"login":"Schwartz10","id":12353734,"node_id":"MDQ6VXNlcjEyMzUzNzM0","avatar_url":"https://avatars1.githubusercontent.com/u/12353734?v=4","gravatar_id":"","url":"https://api.github.com/users/Schwartz10","html_url":"https://github.com/Schwartz10","followers_url":"https://api.github.com/users/Schwartz10/followers","following_url":"https://api.github.com/users/Schwartz10/following{/other_user}","gists_url":"https://api.github.com/users/Schwartz10/gists{/gist_id}","starred_url":"https://api.github.com/users/Schwartz10/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Schwartz10/subscriptions","organizations_url":"https://api.github.com/users/Schwartz10/orgs","repos_url":"https://api.github.com/users/Schwartz10/repos","events_url":"https://api.github.com/users/Schwartz10/events{/privacy}","received_events_url":"https://api.github.com/users/Schwartz10/received_events","type":"User","site_admin":false},"created_at":"2018-08-14T03:03:14Z","updated_at":"2018-08-14T03:03:14Z","author_association":"NONE","body":"Hi, this could potentially be a separate issue, but want to make sure I'm not adding any duplicates - I'm using the with-redux (`create-next-app`) package. Dispatching actions to the redux store, server-side from within `getInitialProps` does not update the client-side redux store. More information below:\r\n\r\nI'm creating a HOC for pages that need to fetch data, essentially with the following flow:\r\n\r\n```\r\nconst getInitialPropsHOC = (Page, thunk) => {\r\n  class getInitialPropsFunc extends Component {\r\n    static async getInitialProps ({ reduxStore }) {\r\n       /*\r\n            1. Fetch data from an api endpoint (the thunk passed into HOC) (using async/await)\r\n            2. dispatch an action to redux via `reduxStore.dispatch(action)` with the payload from the                         \r\n                endpoint\r\n       */\r\n            return {} // return nothing because the `Page` that is passed into the HOC will be connected to redux store\r\n```\r\n\r\nThe connected page would look something like this:\r\n\r\n```\r\nfunction mapStateToProps(state) {\r\n  return {\r\n    data: state.....,\r\n  };\r\n}\r\n\r\nconst ConnectedComponent = connect(mapStateToProps)(Page)\r\n\r\nexport default getInitialPropsHOC(ConnectedComponent, getReleasesFromAPI);\r\n```\r\n\r\nWhen I navigate _directly_ to the `Page` that is wrapped in this higher order component, I am successfully hitting the endpoint, and seem to be successfully updating redux, server-side. I've verified that by printing `reduxStore.getState()` and the store looks up to date with information from the API in my server terminal. However, when I log the store client side (in a `componentDidMount` for example), from within the connected component, the redux store is in its initial state. \r\n\r\nHowever, when I navigate from another component to the `Page` that is wrapped in this higher order component, the data fetching happens client-side and everything works properly.\r\n\r\nAnother interesting paradigm is the fact that you can `getInitialProps` from within a connected component. Seems counterintuitive since `getInitialProps` is only available to parent pages and we often `export default connect()(Component)`. So maybe I need to reverse my composable HOC logic? "}}
{"actor":{"display_login":"Schwartz10"}}