toPromise는 sagaMiddleware.run을 통해 만든 Task를 Promise로 변환합니다. 별도의 작업을 하지 않으면 이 Promise는 끝나지 않습니다. 왜냐하면, 우리가 만든 루트 사가에서 액션을 끝없이 모니터링하기 때문이죠.

그런데 redux-saga의 END라는 액션을 발생시키면 이 Promise를 끝낼 수 있습니다. END 액션이 발생되면 액션 모니터링 작업이 모두 종료되고, 모니터링되기 전에 시작된 getUserSaga와 같은 사가 함수들이 있다면 해당 함수들이 완료되고 나서 Promise가 끝나게 됩니다. 이 Promise가 끝나는 시점에 리덕스 스토어에는 우리가 원하는 데이터가 채워집니다. 그 이후에 다시 렌더링하면 우리가 원하는 결과물이 나타납니다.

코드를 다 작성했으면 프로젝트를 빌드하고, 서버 사이드 렌더링 서버를 다시 실행한 다음에 http://localhost:5000/users/1 페이지에 들어가서 새로고침을 해보세요.

$ yarn bulid
$ yarn build:server
$ yarn start:server

▲ 그림 20-12 redux-saga 서버 사이드 렌더링

 

위와 같이 데이터가 채워진 상태로 잘 렌더링되나요?