ReactorKit

앱스토어에 등록된 앱들의 오픈소스를 훔쳐보면 꽤나 자주 보였던 ReactorKit입니다.

사실 막연하게 React Native랑 관련된건가보다~ 하고 지나치곤 했었는데.. 전혀 아니였죠? 😜

겨울 프로젝트 동안 사용해야 할 것 같아서 공부해보게 되었습니다!

ReactorKit

ReactorKit은 RxSwift를 제대로, 또 편하게 사용하기 위해 나온 프레임워크입니다.

공식 github에 설명된 글을 읽어보면, ReactorKit은 리액티브하고 일방성을 갖는 Swift 어플리케이션을 지원하기 위해 만들어졌다고 합니다.

리액티브한거야 RxSwift 기반이니 그렇다고 치고, 일방성에 주목하고 공부를 해보면 되겠네요!

기본 컨셉

ReactorKit은 View와 Reactor라는 것 사이를 유저의 Action과 뷰의 State를 Observable stream을 만들어 전달한다고 합니다.

당최 무슨 말인지 알 수가 없네요 🤯

하나씩 차근차근 봅시다.

View

View는 우리가 생각하는 그 View 자체입니다.

화면을 표시하는 모든 요소들을 View라고 하고 이 View들은 유저의 입력을 action stream으로 bind하거나 각각의 UI Component들에게 view states를 bind한다고 합니다.

그러니까 1. 유저의 인터랙션을 받거나 2. 하위 UI Component들에게 Reactor의 상태를 알려준다는 뜻인 것 같네요.

이 View에는 비즈니스 로직이 없다고 합니다. 단지 전달자의 역할만 한다고 보면 될 것 같아요!

View Controller가 View라는 것을 명시하기 위해서 View 프로토콜을 채택하라고 합니다.

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

View 프로토콜을 채택하는 것 만으로 이 뷰컨은 reactor 프로퍼티를 갖게 됩니다.

profileViewController.reactor = UserViewReactor()

위와 같은 작업이 자동으로 이루어진다는 의미입니다.

이렇게 주어진 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)
}

스토리보드도 지원한다고 합니다!

스토리보드를 사용하는 뷰컨은 View가 아니라 StoryboardView를 채택해야 합니다!

class MyViewController: UIViewController, StoryboardView {
  func bind(reactor: MyReactor) {
    ...
  }
}

Reactor

Reactor는 UI와는 전혀 관련없는 독립된 레이어 계층입니다.

하지만 View의 상태를 결정해주는 아주 중대한 역할을 합니다.

모든 View는 각자의 Reactor를 가져야하고, 모든 로직을 그 Reactor에 위임(delegate)합니다.

그러면서도 Reactor는 View에 대한 의존성이 1도 없기 때문에 Unit Test하기에도 수월하다고 하네요!

Reactor를 사용하기 위해서는 View와 마찬가지로 Reactor 프로토콜을 채택해야 합니다.

이 프로토콜을 채택한 객체는 Action, Mutation, State 세가지 타입을 가져야합니다.

또한 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으로 변환합니다.

바로 mutate()와 reduce()를 통해서죠.

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

모든 비동기 작업들이나 API 호출 등이 여기에 들어가는 작업이라고 합니다.

func mutate(action: Action) -> Observable<Mutation> {
  switch action {
  case let .refreshFollowingStatus(userID): // receive action
    return UserAPI.isFollowing(userID) // create 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와 Mutation으로부터 새로운 State를 만드는 메서드입니다.

새로운 State를 동기적으로 반환하는 기능 외의 기능은 넣지 말라고 하네요.

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

transform()은 각 stream을 다른 stream으로 변환하는 기능을 하는 메서드입니다.

심화

Global States

Redux와 다르게 ReactorKit은 global app state를 정의하지 않는다고 합니다.

저는 Redux가 뭔지 모르니 일단 넘어가볼게요..

그렇기 때문에 global state를 아무걸로나 관리할 수 있다고 합니다. BehaviorSubject나 PublishSubject, 혹은 reactor를 사용해서 관리할 수 있다고 하네요.

동시에 global state를 사용하도록 강제하지도 않는다고 합니다.

ReactorKit에는 Action ➡️ Mutation ➡️ State Flow가 존재하지 않습니다.

그래서 global state를 Mutation으로 변환하려면 transform(mutation:)을 사용해야 합니다.

var currentUser: BehaviorSubject<User> // global state

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

위 예시는 currentUser가 바뀔 때 Mutation.setUser를 실행해달라는 코드입니다.

기본적인 스트림인 mutation과 Global State의 currentUser를 병합(merge)시키는 코드인데요,

currentUser는 Mutation.setUser로 정의된 Mutation으로 변환해서 들어가고 있네요.

View Communication

View간의 데이터 전달이 이루어질 때 보통 delegate 패턴이나 closure를 사용하죠?

ReactorKit은 데이터 전달에 위 두 가지 방법을 사용하지 말고 reactive extension을 사용하는 것을 추천한다고 합니다.

// Read as "Reactive Extension where Base is a SomeType"
extension Reactive where Base: SomeType {
  // Any specific reactive extension for SomeType
}

View A를 ChatViewController, View B를 MessageInputView라고 합시다.

View B는 View A의 subview입니다.

View B가 View A에 ControlEvent를 보내면 View A에서 본인의 reactor인 Reactor A에 Action을 전달하는 시나리오입니다.

원래의 방식대로 View B에서 View A로 이벤트나 데이터를 전달하려면 delegate나 closure를 사용했었죠.

대신 ReactorKit이 추천하는 방식대로 Reactive extension을 사용해서 구현을 해보면 아래와 같습니다.

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

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