[Redux] 액션 생성자를 사용해야 하는 이유 (Idiomatic Redux: Why use action creators?)

원문 : https://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/

Idiomatic Redux: Why use action creators?

컴포넌트 내에서 비동기 로직을 호출하거나 액션을 인라인으로 디스패치하는것도 가능합니다

왜 우리는 액션 생성자를 사용해야 하나요?

 

댄 아브라모프의 Stack Overflow 답변에 따르면 프로그래머는 :

• 동작(메서드, 함수 내부 로직)을 캡슐화하고
• 관심사를 분리하며
• 코드 중복을 최소화하는 것이 좋습니다.
• 코드를 가능한 한 테스트 가능하게 유지해야 합니다.

원문 저자가 생각하는,

모든 로직을 컴포넌트에 직접 넣는 것보다 액션 생성자를 사용해야 하는 5가지 주요 이유가 있습니다.

---

기본적인 레벨의 추상화

동일한 타입의 액션을 생성해야 하는 모든 컴포넌트에 액션 타입 문자열을 작성하는 대신

해당 액션을 생성하기 위한 로직을 한 곳에 배치합니다.

컴포넌트와 슬라이스의 결합도 감소, 통신적 응집도 레벨에서 응집도 높아짐

---

문서화

함수의 매개변수는 액션에 필요한 데이터에 대한 지침 역할을 합니다.

(추가로 컴포넌트에서 작성할 코드(API 표면적)가 작아지게 되어있습니다.)

---

간결함과 DRY

---

액션 개체를 즉시 반환하는 것보다 액션 개체를 준비하는 데 들어가는 더 큰 로직이 있을 수 있습니다.

(팩터리 메서드 패턴!)

 

---

캡슐화 및 일관성

 

액션 생성자를 일관되게 사용한다는 것은 컴포넌트가 다음과 같은 것을 알 필요가 없다는 것입니다.

• 액션 생성 및 전달에 대한 세부 정보
• 이것이 단순한 "작업 개체 반환" 함수인지 아니면 수많은 비동기 호출이 있는 복잡한 썽크 함수인지

this.props.someBoundActionCreator(arg1, arg2)를 호출하고 액션 생성자가 액션을 처리하는 방법에 대해 걱정하도록 합니다.

---

테스트 가능성 및 유연성

컴포넌트가 명시적으로 디스패치를 ​​참조하지 않고 프롭으로 전달된 함수만 호출하는 경우

대신 함수의 모의 버전을 전달하는 컴포넌트에 대한 테스트를 작성하는 것이 쉬워집니다.

또한 다른 상황에서 또는 Redux가 아닌 다른 상황에서도 컴포넌트를 재사용할 수 있습니다.

저의 가장 간단하고 관용적인 접근 방식은

항상 컴포넌트에 미리 바인딩된 액션 생성자를 사용하는 것입니다.

이렇게 하면 컴포넌트가 디스패치에 대해 걱정할 필요가 없고 Redux 자체를 몰라도 됩니다.

또한 connect를 사용하여 액션을 바인딩하기 위해 객체 리터럴을 사용하는 것이 좋습니다.

import {connect} from "react-redux";
import {action1, action2} from "myActions";


const MyComponent = (props) => (
    <div>
        <button onClick={props.action1}>Do first action</button>
        <button onClick={props.action2}>Do second action</button>
    </div>
)

// Passing an object full of actions will automatically run each action 
// through the bindActionCreators utility, and turn them into props

export default connect(null, {action1, action2})(MyComponent);

주 : 훅 API의 등장으로 더이상 connect는 사용하지 않습니다.
대신 action1을 ()=>void 타입으로 만들어서 프롭으로 전달해주면 됩니다.