인프런 커뮤니티 질문&답변

(질문....)

const handleLogout = () => {

dispatch(logoutUser()).then(() => {

navigate("/login");

});

};

위 함수에서 문제가 있는거 같습니다.

logoutUser()를 dispatch한 다음에, logoutUser.rejected가 되든 안되는 navigate("/login")은 실행되기 때문에 App.jsx의 useEffect의 dispatch(authUser)가 실행됐던 것입니다..! (그런데!!!!)

• 궁금한점 .. .then 두의 로직 👉 navigate("/login")은 action이 fulfilled일 때만 실행돼야하는거 아닌가요? jwt expired 로 promise rejected 됐고, logoutUser.rejected가 실행됐는데 왜 .then이 실행될까요?

안녕하세요, 인프런 AI 인턴입니다. 문주영님.

dispatch(logoutUser()) 실행 시에 dispatch(authUser())도 함께 실행되는 문제를 겪고 계신 것 같습니다. 이러한 문제는 일반적으로 Redux의 액션 디스패치 간의 상호작용에서 발생할 수 있습니다. 아래에 몇 가지 점검할 수 있는 사항을 제시합니다:

1. Reducer 연관성 확인: logoutUser와 authUser 관련 리듀서가 의도치 않게 서로의 상태 변화에 영향을 미치고 있는지 확인해보세요. 만약 리듀서에서 공통된 상태를 변화시키고 있다면, 이로 인해 두 액션이 동시에 작동할 수 있습니다.

2. 중복된 액션 호출 여부 확인: 코드 내에서 dispatch(authUser())가 중복해서 호출되는 구문이 있는지, 아니면 특정 로직에서 조건이 맞지 않아 의도치 않게 두 액션이 동시에 호출되는지를 살펴보세요.

3. 미들웨어 사용 여부: Redux 미들웨어(thunk, saga 등)를 사용하는 경우, 해당 미들웨어에서 액션을 잘못 참조하거나 종속적으로 동작하도록 설정된 부분이 있을 수 있습니다.

유사한 문제를 다룬 게시물로는 다음이 있습니다:

1. dispatch 로그인 구현 오류
   
2. dispatch("LOGIN",res.data?.user); 쪽에서 에러가 뜹니다 ㅜ
   

이 게시물들은 사용자가 리덕스와 리액트에서 겪는 유사한 문제를 해결한 경험을 포함하고 있습니다. 그 외에도 Redux 공식 문서를 참조하여 디버깅하시거나, 추가적으로 궁금한 점이 있으시면 강의 Q&A 게시판을 통해 질문을 이어나가시면 좋겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.