Thunk

청크 썽크 뭐 발음은 지 맘대로인것 같고, 나는 썽크라고 부르기로 했다.

Redux의 미들웨어다.

 

리덕스를 사용해서 전역상태관리를 할때, 결국 웹개발자는 서버와 통신을 해야 한다.

 

 

그 동안에 기본적인 리덕스의 사용방법은

스토어를 만들고 state,액션, 리듀서를 매칭해서 저장해서

dispatch로 변경되는 payload 떤져주고 액션에 따른 리듀서를 수행하는 식으로

전역으로 state를 관리하는 식으로 사용했다.

 

이 state 나중에 통신할때 주고받는 데이터로 쓰일 것인데,

문제는 통신은 항상 100% 연결이 보장되고 반응시간이 즉각즉각 오는 것이 아니기 때문에,

사전에 공부했던 비동기처리를 해줄 필요성이 있다.

 

꼭 이것만이 전부가 아니겠지만 주로 이런 목적으로 존재하는 것이 미들웨어라고 생각하면 된다.

 

Thunk는 Redux Toolkit에서 제공하는 미들웨어다.

Thunk를 사용하면 클라이언트 내에서 상태관리를 하면서

중간중간 서버와의 통신으로 데이터를 주고 받거나, 인가를 받아오거나 할때

비동기처리를 통해서 원활하게 브라우저가 동작할 수 있도록 코드를 작성할 수 있다.

 

 

// 기존 리덕스 사용시
dipatch(payload)

// thunk 사용시
dispatch(함수) => 함수 실행 => 함수안에서 disaptch(payload)

 

thunk를 사용하게 되면 결국 dispatch를 두번해준다는 것을 눈여겨 봐야할 것 같다.

 

 

 

 

Thunk함수는 createAsyncThunk 라는 API를 사용해서 생성한다.

 

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

첫번째 인자는 Action Value이고,

두번째 인자는 thunk함수이다.

이 함수의 인자로 컴포넌트에서 dispatch하면서 보낸 payload가 첫번째, thunkAPI가 두번째가 되겠다.

thunkAPI에서는 여러가지 기능을 제공하는데 그건 다음 포스트를 진행하면서 정리해야겠다.

 

 

요약하자면,

 

컴포넌트에서 dispatch(__addNumber(payload)); 를 때려준다.

원래 dispatch의 인자는 객체였는데 함수가 인자로 들어간 것을 주목해야 한다.

__addNumber 또한 첫번째 인자로 입력되어있는 action value를 가지고 리듀서를 실행시키므로

결국 액션객체를 반환하는 구조이다. 

__addNumber의 두번째인자로 들어가있는 콜백함수에서는, 원하는 비동기처리 또는 기타 처리를 실시하고

바로 이어서 payload를 리듀서로 던진다.

 

 

이것이 기본적인 thunk의 사용법이 되겠다. 이정도로 정리하면 과부하가 안걸릴거같다.