title: Redux toolkit store reset automatically in navigating between pages in next js
body: <p>I'm a new Next user and have been using Redux with React for a long time
  I had a lot of trouble in using  Redux with Next</p>
  <p>I'm done with this solution</p>
  <p><strong>store.js</strong></p>
  <pre><code>import { configureStore } from '@reduxjs/toolkit';
  import reducers from './rootReducer';
  
  export function makeStore() {
    return configureStore({
      reducer: reducers,
    });
  }
  
  const store = makeStore();
  
  export default store;
  </code></pre>
  <p><strong>rootReducer.js</strong></p>
  <pre><code>import { combineReducers } from '@reduxjs/toolkit';
  import tes from './test/tes';
  
  const reducers = combineReducers({
    test: tes,
  });
  
  export default reducers;
  </code></pre>
  <p><strong>_app.js</strong></p>
  <pre><code>import React from 'react';
  import { Provider } from 'react-redux';
  import store from '../redux/store';
  import { createWrapper } from 'next-redux-wrapper';
  
  const MyApp = ({ Component, ...rest }) =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;Component {...rest} /&gt;
      &lt;/Provider&gt;
    );
  };
  const makestore = () =&gt; store;
  const wrapper = createWrapper(makestore);
  
  export default wrapper.withRedux(MyApp);
  </code></pre>
  <p>But I discovered that any use of the useDispatch
  Inside any page, the search engine does not recognize the content of the page after fetching the data</p>
  <pre><code>import React, { useEffect } from 'react';
  import { Test } from '../../redux/test/tes';
  import { useDispatch, useSelector } from 'react-redux';
  import Link from 'next/link';
  
  function TestPage() {
    const dispatch = useDispatch();
    const { data } = useSelector((state) =&gt; state.test);
    useEffect(() =&gt; {
      dispatch(Test('hi'));
    }, []);
    return (
      &lt;div&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;home&lt;/a&gt;
        &lt;/Link&gt;{' '}
        {data.map((name) =&gt; (
          &lt;h1&gt;{name.title}&lt;/h1&gt;
        ))}
      &lt;/div&gt;
    );
  }
  
  export default TestPage;
  </code></pre>
  <p>One of the next pre-render methods must be used</p>
  <p><strong>I wonder if this is normal with next</strong></p>
  <p><strong>or there Is a better way for doing that?</strong></p>
  <hr />
  <p><strong>#1 Update</strong></p>
  <p>Now after moving data fetching to <code>getStaticProps</code></p>
  <p><strong>TestPage.js</strong></p>
  <pre><code>import React from 'react';
  import { Test } from '../../redux/test/tes';
  import {  useSelector } from 'react-redux';
  import Link from 'next/link';
  import { wrapper } from '../../redux/store';
  
  function TestPage({ pageProps }) {
    const { data } = useSelector((state) =&gt; state.test);
    console.log(data);
  
    return (
      &lt;div&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;home&lt;/a&gt;
        &lt;/Link&gt;{' '}
        {data &amp;&amp; data.map((name) =&gt; (
          &lt;h1&gt;{name.name}&lt;/h1&gt;
        ))}
      &lt;/div&gt;
    );
  }
  export const getStaticProps = wrapper.getStaticProps(
    (store) =&gt; async (context) =&gt; {
      const loading = store.getState().test.loading;
      if (loading === 'idle') {
        await store.dispatch(Test('hi'));
  
      }
  
      return {
        props: {  },
      };
    }
  );
  
  export default TestPage;
  </code></pre>
  <p>The problem now is that the store is not updating
  <code>useSelector return [] </code></p>
  <p>Although <code>console.log (data)</code> from getStaticProps the data is present
  <code>__NEXT_REDUX_WRAPPER_HYDRATE__</code>
  i'm stuck</p>
  <hr />
  <p><strong>#2 Update</strong></p>
  <p>It was really hard to get here and after that, there are still problems getting Redux with Next js</p>
  <p>Now everything works until navigating to any page have  <code>getStaticProps</code> or <code>getServerProps</code></p>
  <p>state getting reset automatically</p>
  <p><strong>store.js</strong></p>
  <pre><code>import reducers from './rootReducer';
  import { configureStore } from '@reduxjs/toolkit';
  import { createWrapper, HYDRATE } from 'next-redux-wrapper';
  
  const reducer = (state, action) =&gt; {
    if (action.type === HYDRATE) {
      let nextState = {
        ...state,
        ...action.payload,
      };
      return nextState;
    } else {
      return reducers(state, action);
    }
  };
  
  const isDev = process.env.NODE_ENV === 'development';
  
  const makeStore = (context) =&gt; {
    let middleware = [];
  
    const store = configureStore({
      reducer,
      middleware: (getDefaultMiddleware) =&gt;
        getDefaultMiddleware().concat(middleware),
      devTools: isDev,
      preloadedState: undefined,
    });
  
    return store;
  };
  
  export const wrapper = createWrapper(makeStore, { debug: isDev });
  </code></pre>