title: How can I use redux saga function action inside getServerSideProps function of nextjs
body: <p>in next.js, i want to operate the saga function inside getServerSideProps, it is dispatched to the serverSide store, but there is a problem that it is not shared to the client store when the hydrate action is executed. My guess is that rehydrate runs before takeEvery runs, is it a version issue?</p>
  <p>I want to move the asynchronous logic to sagaFunction and handle it.</p>
  <p>it's my code</p>
  <pre><code>//saga.ts
  export function* getProductDetailSaga({ payload }: ReturnType&lt;typeof getProductDetailAction&gt;) {
    try {
      const { data } = yield* call(getProductDetail, payload);
      yield put(setFetchedProductDetails(data.productDetail));
    } catch (error) {
      console.error(error);
    }
  }
  
  export default function* productDetailSaga() {
    yield all([
      takeEvery(getProductDetailAction.type, getProductDetailSaga),
  }
  
  //[productId].tsx
  export const getServerSideProps = wrapper.getServerSideProps((store) =&gt; async (ctx) =&gt; {
    const { productId } = ctx.query;
    const {
      osCode,
      deviceId,
      session,
    } = store.getState().user;
  
    store.dispatch(
      getProductDetailAction({
        osCode,
        deviceId,
        session,
        productId,
      })
    );
  
    store.dispatch(END);
    await store.sagaTask.toPromise();
  });
  </code></pre>
  <p>i think END action and sagaTask are not functioning properly.</p>
  <p>but this works fine.</p>
  <pre><code>export const getServerSideProps = wrapper.getServerSideProps((store) =&gt; async (ctx) =&gt; {
    const { productId } = ctx.query;
    const { osCode, deviceId, session } = store.getState().user;
    const { data } = await getProductDetail({
        osCode,
        deviceId,
        session,
        productId,
      });
    
  store.dispatch(setFetchedProductDetails(data.productDetail || null));
  });
  </code></pre>