[Redux-Saga & Next.js] getServerSideProps에서 dispatch 수행하기 (store.dispatch(END), store.sagaTask.toPromise())

// SSR
export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async () => {
    store.dispatch({
      type: LOAD_USER_REQUEST,
    });
    store.dispatch({
      type: LOAD_POSTS_REQUEST,
    });
    //saga에서 END 액션불러오기
    store.dispatch(END);
    //saga에서 success될때까지 기다려주는 액션
    await store.sagaTask.toPromise();
  }
);

 

강의에서 CSR에서 dispatch하던 부분을 SSR로 바꾸는 도중 store.dispatch와 store.sagaTask.toPromise()를 적는 이유가 궁금해서 조금 더 찾아보는 김에 포스팅도 남기게 되었다. 

 

강의는 Redux-Saga와 Next.js를 사용하고있다. 넥스트의 경우 서버사이드 랜더링을 할 수 있다. store.dispatch(END)부터 아래의 코드가 없을경우는 REQUEST이후 SUCCESS 액션을 가져오지 못해서 유저와 게시글 데이터를 가지고 오지 못하는 문제가 생겼었다.

 

하지만 코드를 작성하고나니 SUCCESS까지 수행하고 원하는 데이터까지 성공적으로 가져왔다.

 

- store.dispatch(END)를 사용하지 않을경우 saga가 끝나지 않았다. END를 디스패치 해줘야 store를 통했던 한 사이클을 종료해주는 걸로 보인다.

 

- 그리고 store.sagaTask.toPromise()를 해야 Success까지 서버에서 가져온 후 디스패치를 처리하는걸로 보인다. (미들웨어)

 

 

나중에 툴킷으로 바꿀생각인데 벌써 걱정스