Redux-Thunk 및 Dispatch를 이용하여 Redux에서 다른 액션 크리에이터에서 액션 크리에이터를 호출하는 방법

제목: Redux에서 다른 액션 생성자 내부에서 액션 생성자 호출하기

Redux로 작업할 때, 한 액션 생성자가 다른 액션 생성자를 호출해야 하는 경우가 자주 발생합니다. 이는 복잡한 로직을 처리하거나 코드를 구성하는 데 유용할 수 있습니다. 그러나 호출된 액션 생성자가 제대로 디스패치되어 실행되는지 확인하는 것이 중요합니다. 이 블로그 포스트에서는 Redux에서 액션 생성자를 다른 액션 생성자 내부에서 호출하는 방법을 알아보겠습니다.

Redux-Thunk 이해하기

해결책에 들어가기 전에, 제공된 코드 예제에서 Redux-Thunk 미들웨어를 사용하는 것을 명확히 해야 합니다. Redux-Thunk는 일반적인 액션 객체 대신 함수를 반환하는 액션 생성자를 작성할 수 있게 해줍니다. 이러한 함수는 비동기 작업을 수행하고 필요한 경우 액션을 디스패치할 수 있습니다.

문제 – 액션 생성자가 실행되지 않음

코드 예제에서는 동일한 파일에 ‘foo’와 ‘bar’라는 두 개의 액션 생성자가 있습니다. ‘bar’는 함수 몸체 내에서 ‘foo’를 호출하는 인접한 액션 생성자입니다. 그러나 ‘bar’ 내부에서 ‘foo’ 액션 생성자가 실행되지 않는다고 언급하십니다.

해결책 – 액션 생성자 디스패치하기

문제를 해결하기 위해, ‘bar’ 내부에서 ‘foo’ 액션 생성자가 생성한 액션을 디스패치하여 실행되도록 해야 합니다. 이를 위해 thunk 함수에 전달된 디스패치 함수를 사용할 수 있습니다.

export function bar(param){
    return (dispatch, getState) => {
        dispatch({
            type: ATYPE.SET_DO_THIS_BEFORE_FOO,
            payload: param
        });

        dispatch(foo(param));
    }
}

‘foo’ 액션 생성자를 디스패치함으로써 ‘foo’에서 생성된 액션이 제대로 실행되고 해당 리듀서가 이를 처리할 수 있도록 보장합니다.

결론

이 블로그 포스트에서는 Redux에서 다른 액션 생성자 내부에서 액션 생성자를 호출하는 방법에 대해 다루었습니다. 호출된 액션 생성자가 생성한 액션을 디스패치하는 중요성을 살펴보고 Redux-Thunk 미들웨어를 사용한 해결책을 제공했습니다. 제안된 접근 방식을 따라, 다른 액션 생성자 내부에서 액션 생성자를 효과적으로 호출하여 제대로 디스패치되고 실행되도록 할 수 있습니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs