ReactorKit

• RxSwift와 함께 사용되는 Framework
• 핵심 개념 : Reactor
  • Rx의 Observable과 함께 사용하여 비동기적 데이터를 처리하고, UI와 상호작용을 쉽게 관리 할 수 있는 구조를 만든다.
• RxSwitft + MVVM 프레임워크화(?)
  • 즉, MVVM의 ViewModel 역할을 하면서, 비즈니스 로직을 처리하고 View와 상호작용을 할 수 있도록 제공한다.
  • MVVM은 규격화된 것이 없어 일관적이지 못하지만, ReactorKit은 형식이 갖추어져있다.
• UI 관련 코드와 비즈니스 로직을 분리하고, 코드의 재사용성을 높인다.
• component간 결합도가 낮아 테스트에 용이하다.
• 부분적으로 적용될 수 있어서 유연하게 적용할 수 있다.

작동 방식

• Observable Stream을 통한 전달 (순환구조)
  • 사용자의 Action → Reactor, Reactor에서 방출된 State → View
• ⭐️단방향 흐름⭐️
  • View와 비즈니스 로직을 분리
  • 모듈간 결합도 저하
• View는 Action만 방출 가능 (View와 비슷한 역할)
• Reactor는 State만 방출 가능 (ViewModel과 비슷한 역할)

• View는 Reactor로 받는 State를 통해 UI를 보여준다.

• View는 사용자 인터렉션을 추상화하고, Reactor로 전달한다.

• Reactor는 View로부터 Action Stream을 전달받아, mutate() & reduce() 과정을 거쳐 State Stream으로 다시 View에 방출한다.

  • Reactor Protocol 적용 시, 필수 정의 목록
    • Action (사용자 인터렉션)
      • View에서 전달 받을 액션
      • enum으로 정의
    • Mutation
      • Action & State 매개체 ****
      • View에서 Action을 받은 경우, 해야할 작업 단위 정의 (상태를 변경하는 단위)
      • 외부 노출 ❌ (Reactor 내부에서 Action → State 연결하는 역할 수행)
      • enum으로 정의
    • View 상태 State (초기값 설정을 위한 initialState 필요)
  • mutate() → Observable<Mutation>
    • Action Stream → Mutation Stream 변환 후, reduce()로 전달
    • Mutation에서 정의한 작업 단위들을 사용해 서 Observable 방출
    • RxSwift > concat을 사용해서 비동기 처리에 유용 (Observable이 배열로 주어질 때, 순서대로 실행)
  • reduce() → State
    • 이전 State와 Mutation을 활용해서 새로운 State를 변환 후, 구독하고 있는 View를 State에 따라 업데이트

• View → Reactor (Action 방출)

  • View 레이어에서 View Protocol을 준수해야 한다.
    • DisposeBag, bind(reactor:_) 메서드 필수 포함
      • View Protocol extension에 reactor가 할당되면, 자동으로 bind(reactor:_) 구현부가 호출되게 되어있다.
    • bind 내부에는 Reactor로 방출할 Action과 Reactor로부터 수신할 State를 작성한다.

  import ReactorKit
  import RxGesture
  import RxSwift
  
  extension ViewController: View {
    func bind(reactor: MyReactor) {
      self.numButton.rx.tap.asObservable()
        .map { _ in Reactor.Action.loadImage(url: URL(string: "<https://picsum.photos/300/200>")!) }
        .bind(to: reactor.action)
        .disposed(by: self.disposeBag)
    
      reactor.state
        .map { $0.currentNumber }
        .distinctUntilChanged()
        .map { String($0) }
        .bind(to: self.numLabel.rx.text)
        .disposed(by: self.disposeBag)
      
      reactor.state
        .map { $0.image }
        .bind(to: self.imageView.rx.image)
        .disposed(by: self.disposeBag)
    }
  }