위 코드를 작성할 때는 sagaMiddleware.run이 호출된 이후에 loadUser 함수를 호출하는 것이 중요합니다. loadUser 함수를 먼저 호출하면 CHECK 액션을 디스패치했을 때 사가에서 이를 제대로 처리하지 않습니다.

이제 로그인하고 나서 새로고침을 해 보세요. 로그인 상태가 잘 유지되나요? 리덕스 개발자 도구를 통해 어떤 액션이 디스패치되었는지, 리덕스 스토어는 어떤 상태를 가지고 있는지 확인해 보세요.

현재 페이지가 새로고침될 때 localStorage에 사용자 정보가 들어 있다면 그 사용자 값을 리덕스 스토어에 넣습니다. 그러고 나서 정말 사용자가 로그인 상태인지 CHECK 액션을 디스패치하여 검증하도록 했지요.

CHECK 액션이 디스패치되면 사가를 통해 /api/check API를 호출합니다. 이 API는 성공할 수도 있고, 실패할 수도 있습니다. 만약 실패하면, 사용자 상태를 초기화해야 하고 localStorage에 들어 있는 값도 지워 주어야 합니다.

▲ 그림 24-32 로그인 상태 유지