오늘은 바보같은 실수를 해서 시간을 많이 잡아먹은 일이 있어서, 이런 실수를 줄이고 앞으로 이런 실수가 나온다면 오류를 찾는 시간을 줄이기 위해서 기록을 하고 있다.
유저 게시글의 팔로우 / 언팔로우를 클릭한다면 게시글의 유저 id를 현재 로그인한 유저의 Followings 배열에 추가하거나 삭제를 구현을 했다.
const isFollowing = user && user.Followings.find((v)=>v.id===post.User.id);
const onClick = useCallback(()=>{
if(isFollowing){
dispatch({
type : UNFOLLOW_REQUEST,
data : post.User.id,
})
}else{
dispatch({
type : FOLLOW_REQUEST,
data : post.User.id,
})
}
},[isFollowing])위와 같이 props로 받아온 게시글의 데이터의 유저아이디를 언팔로우인지 팔로우인지 구별하여 id를 전달하는 로직이다.
reducer,sagas 부분도 정확하게 입력했다고 생각했는데 오류가 나왔다.
FOLLOW_REQUEST 가 진행되고 SUCCESS까지 redux-devtools-extension을 통해 확인했는데 데이터가 넣어지지 않는 것이다.
따라서 논리를 잘못 짠 줄 알고 열심히 찾아봤지만,, 결국 시간낭비였고 논리가 틀린 부분은 없었다.
그래서 sagas 부분에서 REQUEST가 들어오고 SUCCESS 액션을 실행할 때 오타가 있는 줄 알았지만 그것도 아니였다..
대체 뭘까 하고 찾아보던 중 비동기 처리 과정을 확인하는 역할을 수행하기 위한 각자의 논리 로딩변수가 있는데 이것이 제대로 돌지 않고 있는 것을 확인했고,
알고보니 처음 액션을 create할 때 오타를 발견했다.
export const UNFOLLOW_REQUEST = 'FOLLOW_REQUEST';로 되있던 것이다. 그래서 팔로우 리퀘스트가 실행되는데 UNFOLLOW_REQUEST도 같이 실행이 되어 중간에 멈춰버린 것이였다.
state 하나씩 잘 눌러보면서 확인을 했으면 쉽게 해결될 간단한 오타 문제를 정말 오래 찾고 있었다는 것에 살짝 현자타임..이 왔지만,
또 하나 주의해야할 점과 에러 발견을 더 쉽게 하기 위한 개념을 잡고 가는 것 같다.
