[ReactorKit#3] Example : GithubSearch 구조 분석

두번째 Example인 GithubSearch. https://github.com/ReactorKit/ReactorKit/tree/master/Examples/GitHubSearch

첫번째 Example인 Counter보다 난이도가 확 올라갔다. 

이 앱은 Github의 API를 이용해서 제목을 입력하면 해당 제목과 매칭되는 레포지토리를 테이블 뷰에 띄워주는 앱이다. 입력할때마다 실시간으로 검색을 하고, 검색결과 cell을 클릭하면 safari 웹사이트로 디테일을 띄우는 방식이다.

GitHubSearchViewReactor 구조 :

Action :
  updateQuery(String?) - 업데이트 액션
  loadNextPage - 다음 페이지 로드 액션

Mutation :
  setQuery(String?) - 쿼리 세팅하기(입력)
  setRepos([String], nextPage: Int?) - 레포지토리 세팅하기
  appendRepos([String], nextPage: Int?) - 레포지토리 추가하기
  setLoadingNextPage(Bool) - 다음페이지 로딩중인지 아닌지 표시하기

State :
  query: String - 쿼리
  repos: [String] - 레포지토리들
  nextPage: Int? - 다음 페이지
  isLoadingNextPage: Bool - 다음페이지 로딩중?

mutate() : Action에 있는 case들 구현
  case .updateQuery(query) - 쿼리 세팅하고, 탐색.
  case .loadNextPage - 다음페이지 로딩중이라고 표시, 탐색, 다음페이지 로딩끝났다고 표시.

reduce() : 
  case .setQuery(query) - 기존 state에서 query 바꿔주기
  case .setRepos(repos, nextPage) - 기존 state에서 repos와 nextPage 바꿔주기
  case .appendRepos(repos, nextPage) - 기존 state에서 repos 추가하고 nextPage 바꿔주기
  case .setLoadingNextPage(isLoadingNextPage) - 기존 state에서 isLoadingNextPage값 바꿔주기

추가로 함수들이 몇개 있는데 url은 api url을 리턴하는 함수, search는 query와 page를 받아서 repos와 nextPage를 Observable로 감싸서 리턴하는 함수이다. 
GitHubSearchViewReactor.Action extension에 isUpdateQueryAction이 있는데 이건 새로 updateQuery Action이 들어올 때 기존에 업데이트 하고 있는 걸 취소할 때 쓰인다.

 

GitHubSearchViewController 구조 :

UI는 tableView 하나밖에 없다. 

bind함수를 살펴보면, 

Action부분 :

searchController의 searchBar.rx.text를 인자로 포함한 Reactor.Action.updateQuery($0)으로 바꿔주고, reactor.action으로 바인드 해준다.
tableView의 contentOffset에서 offset.y + self.tableView.frame.height >= self.tableView.contentSize.height - 100이면 사용자가 더 많은 정보를 원한다고 인지하고, Reactor.Action.loadNextPage로 바꿔서 reactor.action에 바인드 시켜준다.

State 부분 :

reactor.state의 repos 값을 가져온다. 이걸 테이블뷰에 바인드 시켜준다.

View 부분 : 

tableView의 cell을 클릭했을 때 동작할 것도 여기서 설정을 해줘야 한다. cell이 선택되면 사파리를 이용해서 웹을 띄운다.

다음 포스팅에서는 직접 구현을 해본다.