[ReactorKit] 버튼 누르면 숫자가 증가하는 리액터 만들기

안녕하세요

 

저번 포스팅에서는 리액터를 사용해서

 

앱을 실행하면 리액터로 상태값을 바꿔 그 상태값을 출력해서 확인해보는 예제를 공부했었어요

 

이번 시간에는 사용자의 입력에 맞춰 상호작용하는 것을 연습해보기 위해서

 

버튼을 누르면 카운트가 증가되는 리액터를 만들어봤어요

 

먼저

 

Reactor 만들기(수정하기)

import RxSwift
import ReactorKit

import Foundation

final class ViewReactor: Reactor {
 
  //사용자의 행동
  enum Action {
    case buttonTapped
  }
 
  //상태 변화
  enum Mutation {
    case increaseCount
  }
  
  //뷰 상태
  struct State {
    var buttonTapCount: Int = 0
  }
  
  //초기 상태
  let initialState = State()
  
  
  func mutate(action: Action) -> Observable<Mutation> {
    switch action {
    case .buttonTapped:
        return .just(.increaseCount)
    }
  }
  
  
  func reduce(state: State, mutation: Mutation) -> State {
    var newState = state
    switch mutation {
    case .increaseCount:
      newState.buttonTapCount += 1
    }
    return newState
  }
}

 

이번에는

• 사용자의 액션을 [버튼탭]
• 상태 변화를 [카운트 증가]
• 상태 값을 [버튼탭카운트] = 0

으로 설정하고

 

mutate는 [버튼탭] 액션이 실행되면 [카운트 증가]하도록 설정

reduce는 [카운트 증가]가 되면 [버튼탭카운트]를 +1 씩 하도록 설정했어요!

 

 

오 이번 예제 리액터 이해하는데 좀 좋은거 같음

 

 

그럼 이렇게 바뀐(만든) 리액터를 뷰컨에 적용해야겠죠?

 

ViewController에 Reactor 적용하기

참고로 요번 예제는 RxCocoa 깔아야해요

import ReactorKit
import RxSwift
import RxCocoa

import UIKit

final class ViewController: UIViewController, View {
  
  var disposeBag = DisposeBag()
  var button = UIButton(type: .system)
  
  override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .red
    
    self.button.setTitle("클릭!", for: .normal)
    self.button.center = self.view.center
    self.button.sizeToFit()
    self.view.addSubview(self.button)
  }
  
  
  func bind(reactor: ViewReactor) {
    // 액션 보내기
    self.button.rx.tap
      .map { ViewReactor.Action.buttonTapped }
      .bind(to: reactor.action)
      .disposed(by: disposeBag)
    // state 구독
    reactor.state.map { $0.buttonTapCount }
      .subscribe(onNext: { count in
        print("버튼이 \(count)번 눌림")
      })
      .disposed(by: disposeBag)
  }
}

 

 

클릭 버튼 만들고

 

버튼 탭 이 발생하면

리액터의 [버튼탭]이 동작하도록 리액터의 액션 바인딩!

 

여기서 state 구독이 이해가 잘 안됐는데,

 

1. reactor.state
   → Observable<State>
   → State가 바뀔 때마다 이벤트 발행
2. .map { $0.buttonTapCount }
   → State 전체 대신 buttonTapCount만 뽑아냄
3. .subscribe(onNext:)
   → buttonTapCount가 바뀔 때마다 클로저 실행 → print 찍힘

---

즉, State 변화 → 특정 값 뽑기(map) → 값 변할 때 반응(subscribe) 흐름임

 

 

그럼 이렇게 잘 동작하는걸 확인할 수 있답니다.

 

 

그럼 다음 포스팅에서 봐요 안녕~