title: Using Redux dev tools with NextJS: how to find out what's going on in store when Redux is being called server side?
body: <p>We have a NextJS application using <code>next-redux-wrapper</code> and Redux thunks.  We have a page that works fine when we load the page via a local link, that is, it's rendered locally, but when we reload the page, thus rendering it on the server, our store remains (partially) empty: certain fields are never filled.</p>
  
  <p>I'm using Redux dev tools to follow the actions, but all I ever see when I reload the page in the list of actions is <code>@@init</code>.  When I put log statements in I see -- in the server-side console -- that my reducer is being called with valid values.  However that field remains empty in the store, as shown by RDT in the browser.</p>
  
  <p>The Redux actions are not showing up in the browser Redux Dev Tools console because they are happening on the server.   </p>
  
  <p><a href="https://i.stack.imgur.com/HNsZa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HNsZa.png" alt="What Redux Dev Tools shows"></a></p>
  
  <p><a href="https://i.stack.imgur.com/n889e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n889e.png" alt="What my log statements show"></a></p>
  
  <p>The store is set up as <code>next-redux-wrapper</code> instructs</p>
  
  <pre><code>// _app.ts
  import withRedux from 'next-redux-wrapper';
  import initStore from '../redux/store';
  
  const makeStore = initialState =&gt; {
    return initStore(initialState);
  };
  
  const MyApp = ({ Component, pageProps, apollo, store }: Props) =&gt; {
    return (
      &lt;ApolloProvider client={apollo}&gt;
        &lt;Provider store={store}&gt;
          &lt;Sidebar /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Provider&gt;
      &lt;/ApolloProvider&gt;
    );
  };
  
  MyApp.getInitialProps = async appContext =&gt; {
    const { Component, ctx } = appContext;
    const appProps = await App.getInitialProps(appContext);
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};
  
    const allProps = {
      ...appProps,
      ...pageProps
    };
    return { ...allProps };
  };
  export default withRedux(makeStore)(withApollo(MyApp));
  </code></pre>
  
  <p>How can I figure out what's happening in my Redux store if I can't use Redux Dev Tools to see? What I'd like to do is find out exactly <em>where</em> and <em>when</em> the values that are being passed to the reducers are overwritten with a blank value.</p>