개발/Javascript
[Redux-Saga & Next.js] getServerSideProps에서 dispatch 수행하기 (store.dispatch(END), store.sagaTask.toPromise())
이나당
2023. 12. 21. 21:41
// 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까지 서버에서 가져온 후 디스패치를 처리하는걸로 보인다. (미들웨어)
나중에 툴킷으로 바꿀생각인데 벌써 걱정스
반응형