Redux - redux-thunk란? [리덕스 미들웨어]

redux-thunk 란?

리덕스를 사용하는 어플리케이션에서 비동기 작업을 사용할때 가장 기본적인 방법으로는 redux-thunk를 사용하는 것입니다.

해당 미들웨어는 리덕스를 개발한 Dan Abramov가 만든 것으로 redux 공식 메뉴얼에서도 해당 미들웨어를 이용하여 비동기 작업을 다룹니다.

해당 방법은 매우 직관적이고 간단하다는 장점이 있습니다.

그렇다면 thunk 란?

thunk란 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼 것을 칭합니다.

예를들어서 1 + 1을 한다고 가정했을때 아래와 같이 코드를 작성하게 됩니다.

다음과 같이하면 어떨까요?

이렇게 하면 1 + 2 연산이 코드가 실행될 때 바로 이뤄지지 않고 나중에 foo() 가 호출되어야만 이뤄집니다.

redux-thunk는 무엇을 하는 미들웨어일까?

가장 간단히 얘기하면 해당 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성할수 있도록 도와줍니다.

리덕스에서는 기본적으로 액션 자체를 디스패치합니다.

일반 액션생성자는 다음과 같이 파라미터를 가지고 액션 객체를 생성하는 작업만 합니다.

만약 특정 액션이 몇초뒤에 실행하게 하거나, 현재 상태에 따라 무시되게 하려면 일반 액션생성자로는 할 수 없습니다.

redux-thunk 는 이를 가능하게 합니다.

아래는 1초 뒤 액션이 디스패치되게 하는 예제코드입니다.

이렇게 한다면 나중에 store.dispatch(incrementAsync()); 이렇게 호출하면 INCREMENT_COUNTER 액션이 1초뒤에 디스패치됩니다.

아래는 조건에 따라 액션을 디스패치하거나 무시하는 코드를 살펴보겠습니다.

만약 리턴하는 함수에서 dispatch, getState를 파라미터로 받게 한다면, 스토어의 상태에도 접근할 수 있습니다.

따라서 현재의 스토어 상태의 값에 따라 액션이 dispatch될지 무시될지 정해줄 수 있는 것 입니다.

간단하게 정리하면 redux-thunk는 일반 액션 생성자에 날개를 달아줍니다.

보통의 액션생성자는 그냥 하나의 액션객체를 생성할 뿐이지만 redux-thunk를 통해 만들게 되면 그 내부에서 여러가지 작업을 할 수도 있습니다.

참조)

https://velopert.com/3401