issues
search
codesquad-project-team
/
frontend
🍻취향 공유 sns 팀프로젝트
20
stars
3
forks
source link
[51-1] useMiddleware hook 작성
#119
Closed
dev-allenk
closed
4 years ago
dev-allenk
commented
4 years ago
구현내용
기존 useAsyncAction hook을 useMiddleware hook으로 리팩토링
참고사항
비동기로직을 컴포넌트로부터 분리하기 위한 hook이에요.
useAsyncAction 에서는 액션함수를 비동기로 만들어서 작성했는데 몇가지 단점이 존재했어요.
액션함수가 기존 형태와 달라져서 혼란스럽다.
로직 실행 중 결과에 따라 다른 액션을 실행해야 할 경우 객체리터럴로 작성하는게 반강제되어 번거롭다.
첫번째 이유가 가장 크게 다가왔었는데 미들웨어라는 좋은 아이디어가 생각나서 리팩토링했어요.
전체적인 흐름
dispatch > action > middleware > reducer
리팩토링 후 몇가지 장점
액션 함수를 리덕스와 같이 단순한 형태로 작성할 수 있다.
여러개의 미들웨어를 사용할 수 있기 때문에 순차적인 로직을 미들웨어를 이용하여 분리할 수 있다.
logger 미들웨어를 사용하여 액션 내용을 콘솔에서 쉽게 모니터링 할 수 있다.
logger 스샷 :
개인적인 소감은
관심사 분리가 잘 됐다!
입니다.
action은 단순히 액션객체 생성, middleware는 사이드이펙트와 비동기 관리, reducer는 동기로직 관리로 역할이 잘 나뉜 느낌이라 만족스럽네요.
사용 예시는
코드샌드박스 예시
를 참고해주세요.
해결된 이슈 번호
resolved #118
구현내용
참고사항
관심사 분리가 잘 됐다!
입니다.해결된 이슈 번호