title: Next.js keep the state or send props when router.push
body: <p>I'm new to Next.js and I am redirecting the user to next page using <code>router.push</code></p>
  <pre class="lang-js prettyprint-override"><code>router.push(&quot;/terminal_summary&quot;);
  </code></pre>
  <p>My Redux state is empty on the next page, but I need the data I have in the state. How do I keep it or at least how can I send some props with <code>router.state</code>?</p>
  <p>I tried <code>router.push(&quot;/terminal_summary&quot;, undefined, { shallow: true });</code> but it doesn't work.</p>
  <p>I have also tried:</p>
  <pre class="lang-js prettyprint-override"><code>router.push({
    pathname: '/terminal_summary',
    query: props.terminalPayload
  })
  </code></pre>
  <p>But it sends data in query parameter.</p>
  <p>The best thing would be to keep all the data in state or at least I want to be able to redirect with props.</p>
  <p>EDIT:</p>
  <p>On the next page I'm trying to access the Redux state using <code>mapStateToProps</code></p>
  <pre><code>function mapStateToProps(state) {
    return {
      terminalPayload: state.terminalPayload,
    };
  }
  </code></pre>
  <p>But this state after redirecting is showing <code>initialState</code> instead of the changes I have done on the previous page.</p>
  <p>So the value is <code>{}</code> but it is supposed to be an object like below.</p>
  <pre><code>{
     merchant: [{ /*multiple objects*/ }],
     products: [{ /* multiple products*/}],
     // other data
  }
  </code></pre>
  <p>Please note, this is currently not saved in the db and supposed to be saved on the next page where I want to show the summary then ask user to save.</p>
  <p>Another note, I can see the data from Redux DevTools in Chrome but when I access on the page it is <code>{}</code>.</p>
  <p>EDIT 2:</p>
  <p>here is the complete redux code:</p>
  <p>configureStore.js</p>
  <pre><code>export default (initialState) =&gt; {
    return createStore(
      rootReducer,
      initialState,
      composeWithDevTools(applyMiddleware(thunk, reduxImmutableStateInvariant()))
    );
  };
  </code></pre>
  <p>reducers/index.js</p>
  <pre><code>const rootReducer = combineReducers({
    terminals,
    merchants,
    distributors,
    terminalPayload,
    roles,
    /* other reducers */
  });
  
  export default rootReducer;
  </code></pre>
  <p>initialState.js</p>
  <pre><code>export default {
    terminals: {
      imported: [],
    },
    merchants: [],
    distributors: [],
    terminalPayload: {},
    roles: [],
  };
  </code></pre>
  <p>I'm using next.js so i have _app.js file where i have this code:</p>
  <pre><code>import configureStore from &quot;../redux/configureStore&quot;;
  
  function MyApp({ Component, pageProps }) {
    let state = {};
    const store = configureStore();
  
    return (
      &lt;Provider store={store}&gt;
        &lt;Layout&gt;
          &lt;Component {...state} /&gt;
        &lt;/Layout&gt;
      &lt;/Provider&gt;
    );
  }
  </code></pre>
  <p>then i have some actions and where is how i subscribe to it</p>
  <p>terminal.js</p>
  <pre><code>const terminal = (props) =&gt; {
       const router = useRouter();
       /* functions */
       /* i have a function here that use router.push('terminal_summary') to redirect user to next page */
       return /* jsx */
  }
  
  function mapStateToProps(state) {
    return {
      terminals: state.terminals,
      terminalPayload: state.terminalPayload,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      terminalActions: bindActionCreators(terminalActions, dispatch)
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(terminal);
  </code></pre>
  <p>terminal_summary.js</p>
  <pre><code>const terminalSummary = (props) =&gt; {
    const router = useRouter();
  
  
    return (
      /* jsx */
    );
  };
  
  terminalSummary.propTypes = {
    terminalPayload: PropTypes.object.isRequired,
  };
  
  function mapStateToProps(state) {
    return {
      terminalPayload: state.terminalPayload, // this object is empty here {} which is supposed to be same as i had on terminal.js page
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {};
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(terminalSummary);
  </code></pre>
  <p>i have been looking into this and im not sure if it is something related to this:</p>
  <p><code>https://nextjs.org/docs/api-reference/data-fetching/getInitialProps</code>
  <code>https://github.com/kirill-konshin/next-redux-wrapper</code></p>