본문 바로가기

React/Redux

Redux-thunk

리덕스 떵크는 액션 객체가 아닌 함수를 디스패치 할 수 있도록 해주는 라이브러리이다. 비동기 작업을 처리하기 위해서 주로 사용되는데, 정말 많이 사용된다고 한다.

기본적인 원리는 아래와 같다.

 

떵크라는 함수는 미들웨어의 역할로써 중간에 위치하는데, 액션을 받아오면, 그 액션이 함수 타입인지 먼저 확인한다. 만약 액션이 함수타입이 아니라면, 가령 객체타입이라면, next 함수로 넘어가 그대로 다음 미들웨어 혹은 리듀서로 전달되고, 만약 함수타입이라면, 액션의 디스패치와 상태를 가져와 실행한다.

 

이를 통해 어떤 작업들을 할 수 있냐면...

getComments 라는 함수에서는 액션을 dispatch 할수도 있고, state를 가져올 수도 있다. 위 함수는 api를 요청한 뒤, api에서 받아오는 값에 따라서 상황에 맞는 디스패치를 하려고 한다. 성공시 comments 들을 띄우는 액션을 디스패치 하고, 실패시 에러를 띄우는 액션을 디스패치 하려는데, 만약 떵크가 없었다면 이 작업을 하기 위해서 삥 돌아가야 할 것이다. 가령 받아온 후에 state을 바꾸고나서 확인하는 작업인데, 에러가 난다면 state은 모두 잃어버리게 될 것이다. 따라서, 미들웨어인 getComments를 둠으로써 비동기 작업 후 작업의 결과에 따라서 다른 액션ㅇ을 디스패치하는 기능을 쓴다면, 원래의 상태는 유지하면서 더 간편한 처리를 할 수 있다. 이런 함수를 떵크 함수라고 하는 것이다. 떵크 함수에서는 액션을 디스패치 할 수도 있고, 현 state를 조회할 수도 있다.

'React > Redux' 카테고리의 다른 글

Redux-saga - Promise 작업 처리  (0) 2020.07.07
Redux-saga - 기본  (0) 2020.07.07
Redux-saga - Generator 문법  (0) 2020.07.07
Redux - Middleware  (0) 2020.07.06