[아키텍쳐] ReactorKit이란

배울게 정말 많다 ..! 

하나 하나 아키텍쳐들을 알아가면서 MVx 외의 앱 아키텍쳐 개념이 점점 구체화되는거 같다. 이번에는 reactorKit 도큐먼트를 읽어보고 다른 아키텍쳐와 어떻게 다른지 알아보려구 한다 !!

 

참고 : https://github.com/ReactorKit/ReactorKit

GitHub - ReactorKit/ReactorKit: A library for reactive and unidirectional Swift applications

ReactorKit이란 Flux와 Reactive Programming의 조합입니다.

사용자의 action과 view의 state는 observable 스트림을 통해 각 layer에게 전달됩니다.

이러한 흐름은 단방향적입니다. 뷰는 오직 action만 방출 할 수 있고, reactor는 state만 방출 할 수 있습니다.

 

디자인 목표 :

Testability : ReactorKit의 첫번째 목표는 뷰로부터 비지니스 로직을 분리하는 것입니다. 이것은 코드를 테스트 가능하게 만들어 줍니다. reactor는 뷰에 의존적이지 않습니다. 단지 reactor와 view binding에 대해 테스트 하면 됩니다.

Start Small : ReactorKit은 앱 전체가 단일 아키텍쳐를 사용하지 않아도 됩니다. reactorKit은 하나 또는 그 이상의 뷰에 대해 부분적으로 적용할 수 있습니다. 기존 프로젝트에 ReactorKit을 적용하기 위해 모든 코드를 재 작성 하지 않아도 됩니다. (좋군 ..)

Less Typing : ReactorKit은 간단한 것을 위해 복잡한 코드를 피하는 데 중점을 둡니다. 다른 아키텍쳐와 비교하면 더 적은 코드를 필요로 합니다. 

 

 

 

View

view는 데이터를 나타냅니다. viewController와 Cell은 view로 취급됩니다. view는 user input을 action stream에 바인딩하고 view state를 UI 컴포넌트에 바인딩합니다. view layer에는 비지니스 로직이 없습니다. view는 오직 action stream과 state stream을 매핑하는 방법을 정의합니다. 

view를 정의하기 위해서 존재하는 기존 class에 View protocol을 준수시킵니다. 그러면 그 클래스는 자동으로 reactor라는 프로퍼티를 가지게 될 것입니다. 이 프로퍼티는 일반적으로 view 밖에서 선언됩니다. 

class ProfileViewController: UIViewController, View {
  var disposeBag = DisposeBag()
}

profileViewController.reactor = UserViewReactor() // inject reactor

 

reactor 프로퍼티가 변한다면, bind(reactor:) 함수가 호출됩니다. 이 메서드를 구현하여 action stream과 state stream의 바인딩을 정의합니다. 

func bind(reactor: ProfileViewReactor) {
  // action (View -> Reactor)
  refreshButton.rx.tap.map { Reactor.Action.refresh }
    .bind(to: reactor.action)
    .disposed(by: self.disposeBag)

  // state (Reactor -> View)
  reactor.state.map { $0.isFollowing }
    .bind(to: followButton.rx.isSelected)
    .disposed(by: self.disposeBag)
}

 

스토리보드를 사용하여 뷰 컨트롤러를 초기화하는 경우 StoryboardView 프로토콜을 사용합니다. 모든 것이 동일하지만 유일한 차이점은 view가 로드된 후(viewDidLoad) StoryboardView가 바인딩을 수행한다는 것입니다.

let viewController = MyViewController()
viewController.reactor = MyViewReactor() // will not executes `bind(reactor:)` immediately

class MyViewController: UIViewController, StoryboardView {
  func bind(reactor: MyViewReactor) {
    // this is called after the view is loaded (viewDidLoad)
  }
}

 

Reactor

reactor는 뷰의 상태를 관리하며 뷰에 의존적이지 않은 계층입니다. reactor의 가장 중요한 역할은 control flow를 view에서 분리하는 것입니다. 모든 view는 상응하는 reactor를 가지고 있고 모든 로직은 reactor에게 위임합니다. reactor는 view에 의존성이 없기 때문에 테스트 하기 용이합니다. 

 

reactor를 정의하기 위해 Reactor 프로토콜을 준수합니다. 이 프로토콜은 Action, Mutation, State 3가지 타입을 정의해야 합니다. 또한 initialState라는 프로퍼티도 필요합니다.

class ProfileViewReactor: Reactor {
  // represent user actions
  enum Action {
    case refreshFollowingStatus(Int)
    case follow(Int)
  }

  // represent state changes
  enum Mutation {
    case setFollowing(Bool)
  }

  // represents the current view state
  struct State {
    var isFollowing: Bool = false
  }

  let initialState: State = State()
}

Action은 사용자 상호작용을 나타내며 State는 view의 상태를 나타냅니다. Mutation은 Action과 State의 매개체입니다. reactor는 action stream을 state stream으로 2단계에 걸쳐 바꿉니다. mutate(), reduce()

 

mutate()는 action을 받아 Observable<Mutation>을 생성합니다.

func mutate(action: Action) -> Observable<Mutation>

비동기 작업이나 API 호출과 같은 모든 부작용은 이 메서드에서 수행됩니다.

func mutate(action: Action) -> Observable<Mutation> {
  switch action {
  case let .refreshFollowingStatus(userID): // receive an action
    return UserAPI.isFollowing(userID) // create an API stream
      .map { (isFollowing: Bool) -> Mutation in
        return Mutation.setFollowing(isFollowing) // convert to Mutation stream
      }

  case let .follow(userID):
    return UserAPI.follow()
      .map { _ -> Mutation in
        return Mutation.setFollowing(true)
      }
  }
}

 

reduce()는 예전 state와 mutate를 받아 새로운 state를 생성합니다.

func reduce(state: State, mutation: Mutation) -> State

이 메소드는 순수함수 입니다. 단지 새로운 state를 생성해 동기적으로 리턴합니다. 이 함수에서 어떠한 부작용도 수행하지 마십시오.

func reduce(state: State, mutation: Mutation) -> State {
  var state = state // create a copy of the old state
  switch mutation {
  case let .setFollowing(isFollowing):
    state.isFollowing = isFollowing // manipulate the state, creating a new state
    return state // return the new state
  }
}

transform()은 각각의 stream을 변형합니다. 3가지 transform() 함수가 있습니다.

func transform(action: Observable<Action>) -> Observable<Action>
func transform(mutation: Observable<Mutation>) -> Observable<Mutation>
func transform(state: Observable<State>) -> Observable<State>

이 메서드를 구현하여 다른 Observable stream을 변환하고 결합합니다. 예를 들어, transform(mutation:)은 global event stream을 mutation stream에 결합하는 데 가장 좋습니다. 자세한 내용은 Global State를 참조하십시오.

 

Global States

redux와 달리, ReactorKit는 global app state를 정의하지 않습니다. 이것은 global state를 관리하기 위해 무엇이든 사용할 수 있음을 의미합니다. BehaviorSubject, PublishSubject 또는 Reactor를 사용할 수 있습니다. ReactorKit은 global state를 강제하지 않으므로 애플리케이션의 특정 기능에서 ReactorKit을 사용할 수 있습니다.

이것은 Action → Mutation → State flow에서 global state가 없음을 의미합니다. global state를 mutation으로 변환하려면 transform(mutation:)을 사용해야 합니다. 현재 인증된 사용자를 저장하는 global BehaviorSubject가 있다고 가정해 보겠습니다. currentUser가 변경될 때 Mutation.setUser(User?)를 내보내려면 다음과 같이 하면 됩니다.

var currentUser: BehaviorSubject<User> // global state

func transform(mutation: Observable<Mutation>) -> Observable<Mutation> {
  return Observable.merge(mutation, currentUser.map(Mutation.setUser))
}

그러면 view가 reactor에 action을 보내고 currentUser가 변경될 때마다 mutation이 발생합니다.

 

View Communication

여러 view와 communication 하기 위해선 callback closures 또는 delegate pattern에 익숙해야 합니다. ReactorKit는 이를 위해 reactive extensions을 사용 하길 권장합니다. ControlEvent의 가장 일반적인 예는 UIButton.rx.tap입니다. 핵심 개념은 custom view를 UIButton 또는 UILabel로 처리하는 것입니다.

메시지를 표시하는 ChatViewController가 있다고 가정해 보겠습니다. ChatViewController는 MessageInputView를 소유합니다. 사용자가 MessageInputView에서 send 버튼을 탭하면 텍스트가 ChatViewController로 전송되고 ChatViewController는 reactor의 action으로 바인딩 할 것입니다. 아래는 MessageInputView의 rx extension입니다.

extension Reactive where Base: MessageInputView {
  var sendButtonTap: ControlEvent<String> {
    let source = base.sendButton.rx.tap.withLatestFrom(...)
    return ControlEvent(events: source)
  }
}

ChatViewController에서 위의 extension을 사용 할 수 있습니다.

messageInputView.rx.sendButtonTap
  .map(Reactor.Action.send)
  .bind(to: reactor.action)

Testing

ReactorKit에는 테스트를 위한 내장 기능이 있습니다. 다음 지침에 따라 보기와 리액터를 모두 쉽게 테스트할 수 있습니다.

첫번째로 무엇을 테스트할지 결정해야 합니다. 테스트할 두 가지가 있습니다: view, reactor

view :

Action - 주어진 유저 인풋에 따른 reactor에게 적절한 action을 보냈는가 ?

State - following state에서 view 프로퍼티가 올바르게 설정되었는가 ?

 

Reactor :

State : action에 따른 적절한 state로 변경 되었는가 ?

 

View testing

view는 stub reactor로 테스트 될 수 있습니다. reactor는 stub 프로퍼티를 가지는데 action을 기록하고 state를 강제로 변경할 수 있습니다. reactor의 stub이 활성화 되면, mutate()와 reduce()가 모두 실행되지 않습니다. stub에는 다음과 같은 속성이 있습니다.

var state: StateRelay<Reactor.State> { get }
var action: ActionSubject<Reactor.Action> { get }
var actions: [Reactor.Action] { get } // recorded actions

아래는 테스트 케이스에 대한 예제 입니다.

func testAction_refresh() {
  // 1. prepare a stub reactor
  let reactor = MyReactor()
  reactor.isStubEnabled = true

  // 2. prepare a view with a stub reactor
  let view = MyView()
  view.reactor = reactor

  // 3. send an user interaction programmatically
  view.refreshControl.sendActions(for: .valueChanged)

  // 4. assert actions
  XCTAssertEqual(reactor.stub.actions.last, .refresh)
}

func testState_isLoading() {
  // 1. prepare a stub reactor
  let reactor = MyReactor()
  reactor.isStubEnabled = true

  // 2. prepare a view with a stub reactor
  let view = MyView()
  view.reactor = reactor

  // 3. set a stub state
  reactor.stub.state.value = MyReactor.State(isLoading: true)

  // 4. assert view properties
  XCTAssertEqual(view.activityIndicator.isAnimating, true)
}

Reactor testing

reactor는 독립적으로 테스트 될 수 있습니다.

func testIsBookmarked() {
  let reactor = MyReactor()
  reactor.action.onNext(.toggleBookmarked)
  XCTAssertEqual(reactor.currentState.isBookmarked, true)
  reactor.action.onNext(.toggleBookmarked)
  XCTAssertEqual(reactor.currentState.isBookmarked, false)
}

때때로 state는 단일 action에 대해 두 번 이상 변경됩니다. 예를 들어 .refresh는 처음엔 state.isLoading을 true로 변경하고 다음 refreshing 후 false로 변경합니다. 이런 경우 currentSate로 state.isLoading을 테스트 하기엔 쉽지 않습니다. 따라서  RxTest 또는 RxExpect가 필요할지도 모릅니다. 아래는 RxSwift를 사용한 예시입니다.

func testIsLoading() {
  // given
  let scheduler = TestScheduler(initialClock: 0)
  let reactor = MyReactor()
  let disposeBag = DisposeBag()

  // when
  scheduler
    .createHotObservable([
      .next(100, .refresh) // send .refresh at 100 scheduler time
    ])
    .subscribe(reactor.action)
    .disposed(by: disposeBag)

  // then
  let response = scheduler.start(created: 0, subscribed: 0, disposed: 1000) {
    reactor.state.map(\.isLoading)
  }
  XCTAssertEqual(response.events.map(\.value.element), [
    false, // initial state
    true,  // just after .refresh
    false  // after refreshing
  ])
}

 

Scheduling

state stream을 reduce하고 observing 하는 데 사용되는 스케줄러를 지정하려면 스케줄러 프로퍼티를 정의하십시오. 이 대기열은 직렬 대기열이어야 합니다. 기본 스케줄러는 CurrentThreadScheduler입니다.

final class MyReactor: Reactor {
  let scheduler: Scheduler = SerialDispatchQueueScheduler(qos: .default)

  func reduce(state: State, mutation: Mutation) -> State {
    // executed in a background thread
    heavyAndImportantCalculation()
    return state
  }
}

 

Pulse

Pulse는 mutation이 있을 때만 diff를 가집니다. 코드로 설명하면 다음과 같습니다.

var messagePulse: Pulse<String?> = Pulse(wrappedValue: "Hello tokijh")

let oldMessagePulse: Pulse<String?> = messagePulse
messagePulse.value = "Hello tokijh" // add valueUpdatedCount +1

oldMessagePulse.valueUpdatedCount != messagePulse.valueUpdatedCount // true
oldMessagePulse.value == messagePulse.value // true

 

alertMessage처럼 동일한 값이더라도 새로운 값이 할당된 경우에만 이벤트를 수신하고자 할 때 사용합니다.

// Reactor
private final class MyReactor: Reactor {
  struct State {
    @Pulse var alertMessage: String?
  }

  func mutate(action: Action) -> Observable<Mutation> {
    switch action {
    case let .alert(message):
      return Observable.just(Mutation.setAlertMessage(message))
    }
  }

  func reduce(state: State, mutation: Mutation) -> State {
    var newState = state

    switch mutation {
    case let .setAlertMessage(alertMessage):
      newState.alertMessage = alertMessage
    }

    return newState
  }
}

// View
reactor.pulse(\.$alertMessage)
  .compactMap { $0 } // filter nil
  .subscribe(onNext: { [weak self] (message: String) in
    self?.showAlert(message)
  })
  .disposed(by: disposeBag)

// Cases
reactor.action.onNext(.alert("Hello"))  // showAlert() is called with `Hello`
reactor.action.onNext(.alert("Hello"))  // showAlert() is called with `Hello`
reactor.action.onNext(.doSomeAction)    // showAlert() is not called
reactor.action.onNext(.alert("Hello"))  // showAlert() is called with `Hello`
reactor.action.onNext(.alert("tokijh")) // showAlert() is called with `tokijh`
reactor.action.onNext(.doSomeAction)    // showAlert() is not called