지금부터는 Redux에서 Thunk 함수를 작성하는 방법에 대해서 알아보도록 하겠습니다.

먼저 앞에서 잠깐 살펴봤던, 기본적인 Thunk함수를 나타낸 예시 코드를 보겠습니다.

const thunkFunction = (dispatch, getState) => {
    // Action을 dispatch하거나 store로부터 state를 읽는 코드를 넣을 수 있음

    // Async Logic 또는 Side Effects와 관련된 코드도 넣을 수 있음
}

store.dispatch(thunkFunction);

Thunk함수는 두 가지 파라미터를 받게 되는데, 첫 번째 파라미터는 Redux Store의 dispatch() 함수이고, 두 번째 파라미터는 Redux Store의 getState() 함수입니다.

그리고 이렇게 작성된 Thunk함수는 우리가 애플리케이션에서 직접 호출해서 사용하는 것이 아니라, store.dispatch() 함수의 파라미터로 들어가게 됩니다.

앞에서 잠깐 말씀드린 것처럼, Thunk함수는 동기 로직과 비동기 로직을 함께 포함할 수 있습니다. 또한 함수 내부에서 Redux의 dispatch() 함수와 getState() 함수를 자유롭게 호출해서 사용할 수 있습니다.

그렇다면 이런 Thunk 함수를 매번 직접 이렇게 만들어서 사용해야 할까요?

앞에서 Action 객체를 생성하기 위해서 Action Creator 함수를 작성했었습니다.
그와 동일하게 Thunk 함수를 생성해주는 함수를 만드는 방법을 사용할 수 있는데, 이 함수를 Thunk Action Creator라고 부릅니다.

Thunk Action Creator를 실제로 작성한 코드를 한 번 보도록 하겠습니다.

// fetchPostById는 'Thunk Action Creator'
export function fetchPostById(postId) {
    // fetchPostByIdThunk는 'Thunk Function'
    return async function fetchPostByIdThunk(dispatch, getState) {
        const response = await apiClient.get(`/api/post/${postId}`);
        dispatch(postLoaded(response.post));
    }
}

Thunk Action Creator는 일반적인 함수와 동일하게 몇가지 파라미터를 받아서 새로운 Thunk Function을 리턴하게 됩니다.
여기서 파라미터로 어떤 것을 넣을지는 특별한 규칙이 있는 것이 아니기 때문에 개발자가 그냥 정하면 됩니다.

이 예제 코드에 나온 Thunk Action Creator에서는, postId를 이용해서 서버로부터 post를 받아오는 Thunk Function을 리턴하고 있습니다.

그리고 Thunk Action Creator는 무조건 function keyword를 사용해서 만들어야 하는 것은 아닙니다.

const fetchPostById = (postId) => async (dispatch, getState) => {
    const response = await apiClient.get(`/api/post/${postId}`);
    dispatch(postLoaded(response.post));
}

위 코드는 앞에 나온 Thunk Action Creator와 동일한 것을 Arrow Function을 사용해서 만든 것입니다.
결국 Thunk Action Creator는 형태가 중요한 것이 아니라, 정해진 파라미터를 받아서 Thunk Function을 리턴하기만 하면 되는 것이죠.

그럼 이렇게 만든 Thunk Action Creator를 실제로 사용하려면 어떻게 해야 될까요?

import { useDispatch } from 'react-redux';

function PostComponent(props) {
    const { postId } = props;

    const dispatch = useDispatch();

    const fetchPost = () => {
        // Thunk Action Creator를 호출하여 Thunk Function을 만든 후,
        // 만들어진 Thunk Function을 dispatch에 파라미터로 넘김
        dispatch(fetchPostById(postId));
    }

    return ...
}

export default PostComponent;

지금 보시는 코드는 Thunk Action Creator를 실제로 사용하는 예시 코드입니다.

우선 여기서 PostComponent라는 리액트 컴포넌트가 나옵니다.
PostComponent는 props로 postId를 받아서, 해당되는 아이디를 가진 post를 서버로부터 받아와서 보여주는 역할을 하는 컴포넌트입니다.

여기서 react-redux 패키지의 useDispatch() 훅을 사용해서 dispatch() 함수를 생성하였고, 만든 dispatch() 함수에 앞에서 만든 Thunk Action Creator를 호출하여 Thunk Function을 만든 후, 만들어진 Thunk Function을 dispatch에 파라미터로 넘기게 됩니다.

이후 Thunk Function 내에서 일어나는 일은 우리가 앞에서 작성한 것처럼, 서버로부터 Post를 받아와서 받아온 Post 데이터를 postLoaded Action을 통해 Redux Store에 넣게 됩니다.

지금까지 살펴본 내용이 아주 기본적인 Thunk 함수를 작성하는 방법입니다.