title: Next.js + Redux: A Page is loaded before fetching data actions in getInitialProps is complete
body: <p>I'm trying to fetch data from API by triggering a 'getItems' action in getInitialProps in a page.(Let's say it is page A)</p>
  
  <p>Data can be successfully fetched if I go to page A from other page through Link(next/link).</p>
  
  <p>However if I refresh in page A, data never get fetched and I have to manually fetch data by triggering the getItems action.</p>
  
  <p>Could anyone let me know what I should do to fetch data even when refreshing the page?</p>
  
  <p><strong>_app.js</strong></p>
  
  <pre><code>const MyApp = props =&gt; {
    const { Component, pageProps, store } = props
  
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;link rel='stylesheet' href='/styles/global.css' /&gt;
        &lt;/Head&gt;
        &lt;Provider store={store}&gt;
          &lt;MainLayout&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/MainLayout&gt;
        &lt;/Provider&gt;
      &lt;/&gt;
    )
  }
  
  MyApp.getInitialProps = async ({ Component, ctx }) =&gt; {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {}
    return { pageProps }
  }
  
  export default withRedux(store)(MyApp)
  </code></pre>
  
  <p><strong>pageA.js</strong></p>
  
  <pre><code>import Head from 'next/head'
  import Link from 'next/link'
  import { connect } from 'react-redux'
  import { getItems, addItem } from '../../store/actions/itemAction'
  import { GET_ITEMS } from '../../store/types'
  
  const Index = props =&gt; {
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;Item List&lt;/title&gt;
          &lt;link rel='stylesheet' href='/styles/css_pages/shop.css' /&gt;
        &lt;/Head&gt;
        &lt;div&gt;&lt;div&gt;
      &lt;/&gt;
    )
  }
  
  Index.getInitialProps = async ({ store }) =&gt; {
    await store.dispatch(getItems())
    return {}
  }
  
  const mapStateToProps = state =&gt; ({
    goods: state.item.goods,
  })
  
  const mapDispatchToProps = dispatch =&gt; ({
    getItems: () =&gt; dispatch(getItems()),
    addItem: () =&gt; dispatch(addItem()),
  })
  
  export default connect(mapStateToProps, mapDispatchToProps)(Index)
  
  </code></pre>
  
  <p><strong>itemAction.js</strong></p>
  
  <pre><code>import fetch from 'isomorphic-unfetch'
  import { GET_ITEMS } from '../types'
  
  export const getItems = () =&gt; {
    return dispatch =&gt; {
      fetch('http://localhost:5000/item')
        .then(res =&gt; res.json())
        .then(data =&gt; dispatch({ type: GET_ITEMS, payload: data }))
        .catch(err =&gt; console.error(err))
    }
  }
  </code></pre>
  
  <p><strong>itemReducer.js</strong></p>
  
  <pre><code>import { GET_ITEMS } from '../types'
  
  const initialState = { goods: [], loading: false }
  
  const itemReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case GET_ITEMS:
        return {
          ...state,
          goods: action.payload,
          loading: false,
        }
  
      default:
        return state
    }
  }
  
  export default itemReducer
  
  </code></pre>
  
  <p><strong>store.js</strong></p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux'
  import thunk from 'redux-thunk'
  import rootReducer from './rootReducer'
  
  const bindMiddleware = middleware =&gt; {
    if (process.env.NODE_ENV !== 'production') {
      const { composeWithDevTools } = require('redux-devtools-extension')
      return composeWithDevTools(applyMiddleware(...middleware))
    }
  
    return applyMiddleware(...middleware)
  }
  
  export const store = () =&gt; createStore(rootReducer, bindMiddleware([thunk]))
  
  </code></pre>
  
  <p><strong>rootReducer.js</strong></p>
  
  <pre><code>import { combineReducers } from 'redux'
  import itemReducer from './reducers/itemReducer'
  
  const rootReducer = combineReducers({
    item: itemReducer
  })
  
  export default rootReducer
  
  </code></pre>