redux 미들웨어 중 redux-thunk에 대해 알아보겠습니다.

redux-thunk

Thunk 란?

• 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미
  
• redux-thunk 를 사용하면 리덕스 미들웨어가 그 함수를 전달 받아 store 의 dispatch 와 getState 를 파라미터로 넣어서 호출해 준다.

미들웨어 적용하기

• $ yarn add redux-thunk

Thunk 생성 함수 만들기

• 액션 생성 함수에서 일반 액션 객체를 반환하는 대신에 함수를 반환

웹 요청 비동기 작업 처리하기

• 가짜 데이터 가져오기 (JSONPlaceholder)
  • 포스트 읽기
  • 모든 사용자 정보 불러오기
• axios 설치
  • API를 호출하는 함수를 따로 작성 (가독성⬆️, 유지보수⬆️)
• 데이터를 불러와서 렌더링해 줄 때는 유효성 검사를 해주는 것이 중요 (components/Sample.js)
  

리팩토링

• 어렵다...😅

유용한 함수와 리듀서를 만들어서 상태를 관리한다면 매우 깔끔한 코드로 기능 구현 가능