Development/ReactNative

[study] ThunkAction

mefd 2024. 3. 25. 08:56
728x90

ThunkAction과 ThunkDispatch는 Redux Thunk 미들웨어와 관련된 개념이다. Redux Thunk는 Redux의 비동기 작업을 관리하기 위해 사용되는 미들웨어로, 액션 생성자가 함수를 반환할 수 있게 해 준다. 이를 통해 액션 생성자 내에서 비동기 로직을 실행하고, 완료되면 일반 액션 객체를 디스패치할 수 있다.

 

### ThunkAction

`ThunkAction`은 Redux Thunk 미들웨어에서 사용되는 타입이다. TypeScript와 함께 Redux를 사용할 때, 액션 생성자에서 반환되는 함수의 타입을 정의할 때 사용된다. `ThunkAction` 타입은 비동기 작업의 결과를 처리하기 위해 사용되며, 일반적으로 다음 네 가지 파라미터를 받는다:

- `ReturnType`: 함수가 반환하는 타입입니다. 대부분의 경우, `void`가 사용되는데, 이는 thunk 액션이 특정 값을 반환하지 않을 때를 의미한다.

- `StateType`: 스토어의 상태 타입입니다. Redux 스토어의 현재 상태의 타입을 나타낸다.

- `ExtraThunkArg`: (선택 사항) 추가적인 인자를 thunk 함수에 전달할 수 있습니다. 예를 들어, API 클라이언트 같은 것이 될 수 있다.

- `ActionTypes`: thunk에서 디스패치할 수 있는 액션들의 타입입니다. 이는 주로 액션 생성자에 의해 생성된 액션들의 타입을 의미한다.

 

### ThunkDispatch

`ThunkDispatch`는 Redux Thunk 미들웨어가 작동하는 과정에서 사용되는 디스패치 함수의 타입이다. 일반적인 Redux의 `dispatch` 함수는 오직 객체 형태의 액션만을 인자로 받지만, Redux Thunk를 사용할 때는 함수 형태의 액션도 받을 수 있다. `ThunkDispatch` 타입은 이러한 특성을 반영하여, 함수 형태의 액션을 디스패치할 수 있게 해 주며, `ThunkDispatch`는 다음 세 가지 파라미터를 받는다.:

 

- `State`: 스토어의 상태 타입.

- `ExtraThunkArg`: 추가적인 인자의 타입. 

- `Action`: 디스패치 가능한 액션들의 타입이다. 여기서는 함수 형태의 액션 뿐만 아니라, 객체 형태의 액션도 포함된다.

 

Redux Thunk 함께 TypeScript 사용할 , `ThunkAction` `ThunkDispatch` 타입을 활용하면, 애플리케이션 내에서 비동기 작업을 처리하는 있어 타입 안정성을 보장하고, 개발자 경험을 향상시킬 있다.

728x90