Redux Toolkit에서 여러 값을 전달하는 올바른 방법을 드디어 이해했다

Source: Dev.to

오늘은 작은 학습 순간 중 하나였지만, Redux 로직을 작성하는 방식을 완전히 바꾸어 놓았습니다.

예전에는 이렇게 생각했습니다:

• “Redux 액션은 하나의 값만 받을 수 있다”
• “데이터가 더 필요하면 상황이 복잡해질 것이다”

그 후 Redux Toolkit에서 prepare 함수를 사용해 여러 값을 깔끔하고 확장 가능하게 다루는 방법을 알게 되었습니다.

내가 직면한 문제

대출 금액과 대출 목적 두 가지 정보를 동시에 전달해야 하는 액션을 디스패치하려고 했습니다. 처음엔 어떻게 두 값을 올바르게 전달해야 할지 몰라 다음과 같은 방법을 고민했습니다:

• 여러 개의 액션을 만들거나
• 복잡한 payload 구조를 사용하는 것

두 방법 모두 지저분하고 유지보수가 어려워 보였습니다.

해결책: Redux Toolkit의 prepare 함수

createSlice 안에서 prepare 메서드를 정의하면 payload를 자동으로 포맷해 줍니다.

requestLoan: {
  prepare(amount, purpose) {
    return {
      payload: { amount, purpose },
    };
  },

  reducer(state, action) {
    if (state.loan > 0) return;

    state.loan = action.payload.amount;
    state.loanPurpose = action.payload.purpose;
    state.balance += action.payload.amount;
  },
}

여기서 무슨 일이 일어나나요?

1️⃣ prepare가 여러 인자를 처리합니다

객체를 직접 만들 필요 없이 다음과 같이 디스패치할 수 있습니다:

dispatch(requestLoan(5000, "Buy Car"));

prepare는 자동으로 이를 다음 형태로 변환합니다:

payload: {
  amount: 5000,
  purpose: "Buy Car"
}

2️⃣ 리듀서는 간단하게 유지됩니다

리듀서는 payload가 어떻게 만들어졌는지 신경 쓸 필요 없이 단순히 다음에 접근합니다:

• action.payload.amount
• action.payload.purpose

3️⃣ 로직이 더 전문적으로 보입니다

이 접근법을 사용하면:

• 컴포넌트에서 복잡한 payload 생성을 피할 수 있고
• 로직을 중앙에 집중시킬 수 있으며
• 더 깔끔하고 가독성 좋은 리듀서를 작성할 수 있습니다

왜 중요한가요?

Redux Toolkit은 복잡한 패턴을 단순화하도록 설계되었습니다. prepare를 사용하면:

• 액션이 유연해지고
• 리듀서는 깨끗하게 유지되며
• 확장성이 향상됩니다

특별한 트릭이 필요하지 않습니다—올바른 도구만 있으면 됩니다.

핵심 정리

여러 값을 위해 여러 액션을 만들 필요가 없습니다. prepare로 만든 구조화된 payload만 있으면 충분합니다.

마무리 생각

큰 기능은 아니지만 큰 사고 전환을 의미합니다. Redux Toolkit은 코드를 적게 쓰는 것뿐만 아니라 더 똑똑하고 깔끔하게 쓰는 것이 목표입니다. Redux Toolkit을 배우고 있다면 prepare와 같은 작은 기능을 간과하지 마세요—가장 큰 차이를 만들 수 있습니다.