title: Hydration payload is incorrect after dispatching a thunk
body: <p>I'm using <code>next-redux-wrapper</code>, and on my <code>wrapper.getServersideProps</code> I'm dispatching a thunk, but during hydration it's action returns a payload of same value of initial state. Why?</p>
  <p>My Thunk:</p>
  <pre><code>export const fetchData = createAsyncThunk&lt;IData&gt;(
    &quot;fetch-data&quot;,
    async () =&gt; {
      const res = await fetch(
        &quot;https://...&quot;
      );
      const data: Promise&lt;IData&gt; = res.json();
      console.log(&quot;data&quot;, data) //it's able to fetch the data;
  
      return data;
    }
  );
  </code></pre>
  <p>My extraReducers:</p>
  <pre><code>builder.addCase(HYDRATE, (state, action: AnyAction) =&gt; {
         // the action.payload has the same value of initial state (not updated)
        console.log(&quot;data-action&quot;, action.payload.mySlice); 
  
        if (!action.payload.mySlice.data) {
          return state;
        }
        state.data = action.payload.mySlice.data;
      });
  
   builder
        .addCase(fetchData.fulfilled, (state, action) =&gt; {
          console.log(&quot;fulfilled&quot;);
  
          // action.payload is correct and return fetched data from API    
          state.data = action.payload; 
          state.error = false;
          state.loading = false;
        })
  </code></pre>
  <p>getServerSideProps:</p>
  <pre><code>export const getServerSideProps = wrapper.getServerSideProps(
    (store) =&gt;
      async ({ params }) =&gt; {
        await store.dispatch(fetchData());
  
        return {
          props: {},
        };
      }
  );
  </code></pre>
  <p>I also tried dispatching the data inside my thunk, but didn't work either.</p>
  <p><strong>Update</strong></p>
  <p>Now it works but only when I dispatch data inside the thunk after, adding an <code>await</code> before store.dispatch(fetchData()).</p>