[ReactorKit#1] Example : Counter 구조 분석

우선 첫번째 Example인 Counter. https://github.com/ReactorKit/ReactorKit/tree/master/Examples/Counter 여기서 확인할 수 있다.

 

새로운 프로젝트를 만들고 Github에 Remote를 연결했다.

https://github.com/chongin12/Counter-Prac

chongin12/Counter-Prac

 

우선 Example에 있는 Counter 코드를 한번 살펴보고, 구조를 분석한 다음 코드를 약간씩 참고 해가면서(따라 쳐보면서) 익힐 것이다.

이 앱은 0부터 시작해서 +버튼을 누르면 숫자에 1을 더해주고, -버튼을 누르면 숫자에 1을 빼준다.

 

CounterViewReactor 구조 :

Reactor에서 정의해야 할 것들은 Action, Mutation, State, mutate(), reduce(). 하나하나씩 보자.

Action :
  increase - 더하기 액션
  decrease - 빼기 액션

Mutation :
  increaseValue - 숫자에 +1하기
  decreaseValue - 숫자에 -1하기
  setLoading(Bool) - 로딩중인지 아닌지 표시하기

State :
  value - 숫자
  isLoading - 로딩중?

mutate() : Action에 있는 case들 구현
  case .increase - 로딩중이라고 표시, 숫자에 +1하기, 로딩끝났다고 표시.
  case .decrease - 로딩중이라고 표시, 숫자에 -1, 로딩끝났다고 표시.

reduce() : Mutation에 있는 case들 구현
  case .increaseValue - 기존 state에서 value에 +1 하기.
  case .decreaseValue - 기존 state에서 value에 -1 하기.
  case .setLoading(isLoading) - 기존 state의 isLoading의 값을 전달받은 isLoading으로 바꿔줌

이렇게 reduce()에서 나온 state를 View가 받으면 화면 UI를 업데이트 해준다.

CounterViewController 구조 :

UI는 총 4가지, decreaseButton, increaseButton, valueLabel, activityIndicatorView로 이루어져 있다.

bind(reactor:)함수 안에는 사용자와의 상호작용(User Interaction)을 Action의 case 중 하나로 변환시켜서 넘겨주는 부분과, reduce()가 끝나고 나온 state를 적용시키는 부분이 있어야 한다.

Action의 case중 하나로 변환시켜서 넘겨주는 부분 :
increaseButton(.rx.tap은 RxCocoa가 import 되어있어야 한다.) 이 터치가 되면 이건 Reactor.Action에 있는 .increase 케이스로 바꿔주고, 이를 bind함수의 인자인 reactor를 활용하여 reactor.action에 bind시켜준다.
마찬가지로 decreaseButton이 터치가 되면 Reactor.Action.decrease로 바꿔주고, reactor.action에 bind시켜준다.

state를 적용시키는 부분 : 
reactor.state의 value값을 가져온다. 이 값을 string으로 바꾸고, valueLabel.rx.text에 bind시켜준다.
reactor.state의 isLoading 값을 가져온다. 이 값을 activityIndicatorView.rx.isAnimating에 bind시켜준다.

 

구조 분석은 마쳤다. 다음 포스팅에선 스토리보드 없이 코드로만 이 Counter 예제를 해결해보겠다.