Thunk

Redux 미들웨어

 

미들웨어란?

 

리덕스에서 distpatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다.

여기서 미들웨어를 사용하면 이 과정 사이에 우리가 하고싶은 작업들을 넣어서 기능하게 할 수 있게된다.

즉, 기능을 넣을 수 있는 중간다리 역할을 하는 것이라고 볼 수 있다.

ex) 계산기 기능에서 3초뒤에 연산이 완료되도록 하는 작업

 

보통 우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신의 이유가 크다.

그중에서도 많이 사용되는 것이 Redux-thunk라는 것이다.

 

thunk

 

thunk란?

 

thunk를 사용하면 우리가 dispatch를 할 때 단순 객체가 아닌 함수를 dispatch 할 수 있게 된다.

따라서 함수 안에 하고자 하는 작업을 넣을 수 있고, 그것이 중간에 실행이 되는것이다.

이 함수를 thunk 함수라고 부른다.

 

thunk 사용하기

 

툴킷에서는 createAsyncThunk라는 API를 사용해서 thunk 함수를 생성할 수 있다.

이 API는 함수인데, 첫번째 인자에는 Action Value, 두번째 인자에는 함수가 들어간다.

이 함수에 우리가 하고싶은 작업들을 구현하면 된다.

 

두번째 들어가는 함수에서도 인자를 꺼낼 수가 있는데, 첫번째 인자에서는 이 thunk함수가 외부에서 사용되었을때

넣은 값을 조회할 수 있고, 두번쨰 인자에서는 thunk가 제공하는 여러가지 API 기능들이 담긴 객체를 꺼낼 수 있다.

 

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성한다.

// __는 이 함수가 thunk함수라는 것을 표시하기 위한 개인적인 convention이다.

export const __addNumber = createAsyncThunk(
	"ADD_NUMBER_WAIT",
	(arg, thunkAPI)=>{},
);

 

정리

 

• 리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기전에 중간에 어떤 작업을 더 할 수있다.
• Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다. [thunk의 핵심]
• 리덕스 툴킷에서 Thunk 함수를 생성할 때는 **createAsyncThunk 를 이용한다.**
• createAsyncThunk() 의 첫번째 자리에는 action value, 두번째에는 함수가 들어간다.
• 두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.