[React] Redux - 비동기 처리 (saga, thunk)

박경수·2023년 3월 9일
0

말머리

Notification(알림) 기능을 만들면서 접하게된 이슈와 해결 한 방법을 정리한다.

비동기 처리

상황은 아래와 같다.

  1. 게시글에 댓글 달림
  2. 게시글의 작성자에게 알림 보냄 (이건 실시간이 필요 없다 생각해서 DB Table로 만듬)
  3. 알림 확인 및 알림 제거 시, 정상적으로 노출되지 않음.

Redux-thunk, useCallback 사용

	const onCheckHandle = useCallback((e:any, notiId:string)=> {
      dispatch(updateCheckedRequest(userId, notiId))
    }, [dispatch])
export function updateCheckedRequest(receiver_id:string, comment_id : string):any {
    return async (dispatch:any, test:any) => {
        try{
            let form = {
                receiver_id :  receiver_id, // 받는 사람 (게시글 작성자)
                _id : comment_id // 댓글 id 
            };
            await request('post', UPDATE_CHECKED_URL, form);
            
            dispatch(getNotiList(receiver_id))
            .then((res:any)=> {
                dispatch(notiBadgeInfo(res.payload))
            })
        } catch(err) {
            console.log('false')
        }
    }
}
	

과정

알림상태 업데이트 -> 알림 리스트 조회 -> 조회된 리스트에 상태값을 다시 갱신(store 저장)

  • useCallback 함수를 이용해 dispatch함수의 변경을 허용시킴.
  • 액션 함수에 async-await를 사용해 비동기 작업 수행.
  • 알림 확인UPDATE_CHECKED_URL request를 수행시킴.
  • getNotiList(알림 테이블 조회)로 수정된 테이블을 조회.
  • 받은 respayload를 이용해 notiBadgeInfo(알림 뱃지 정보[갯수, 상태]) state값을 갱신.

결과

작업 완료 및 정상 동작 확인.

댓글 작성

알림 도착

알림 알림확인시 1과 Badge영역 사라짐

알림 제거 정상 동작 (읽지 않은 알림도 제거시 동작)

Client와 DB에서 모두 정상 동적함을 확인 했으나, 본인은 아래와 같은 경험을 얻었다.

  • 코드가 이쁘지 않다.
  • 이렇게 작업하는게 맞는가 란 의문.

Redux-saga 사용

기능을 완성하고 코드를 보니 이마를 탁.
불안감에 휩사여 급하게 saga를 공부중에 있다.

  • 공부 진행중
profile
<>{...}</>

0개의 댓글