Github Search（示例）

Github Search（示例） - 图1

我们还是使用Github 搜索来演示如何使用 ReactorKit。这个例子是使用 ReactorKit 重构以后的版本，你可以在这里下载这个例子。

简介

这个 App 主要有这样几个交互：

  • 输入搜索关键字，显示搜索结果
  • 当用户滑动列表到底部时，加载下一页
  • 当用户点击某一条搜索结果是，用 Safari 打开链接

Action

Action 用于描叙用户行为：

  1. enum Action {
  2.   case updateQuery(String?)
  3.   case loadNextPage
  4. }
  • updateQuery 搜索关键字变更
  • loadNextPage 触发加载下页

Mutation

Mutation 用于描状态变更：

  1. enum Mutation {
  2.   case setQuery(String?)
  3.   case setRepos([String], nextPage: Int?)
  4.   case appendRepos([String], nextPage: Int?)
  5.   case setLoadingNextPage(Bool)
  6. }
  • setQuery 更新搜索关键字
  • setRepos 更新搜索结果
  • appendRepos 添加搜索结果
  • setLoadingNextPage 设置是否正在加载下一页

State

这个是用于描述当前状态：

  1. struct State {
  2.   var query: String?
  3.   var repos: [String] = []
  4.   var nextPage: Int?
  5.   var isLoadingNextPage: Bool = false
  6. }
  • query 搜索关键字
  • repos 搜索结果
  • nextPage 下一页页数
  • isLoadingNextPage 是否正在加载下一页

我们通常会使用这些状态来控制页面布局。

mutate()

将 Action 转换为 Mutation：

  1. func mutate(action: Action) -> Observable<Mutation> {
  2.     switch action {
  3.     case let .updateQuery(query):
  4.       return Observable.concat([
  5.         // 1) set current state's query (.setQuery)
  6.         Observable.just(Mutation.setQuery(query)),
  8.         // 2) call API and set repos (.setRepos)
  9.         self.search(query: query, page: 1)
  10.           // cancel previous request when the new `.updateQuery` action is fired
  11.           .takeUntil(self.action.filter(isUpdateQueryAction))
  12.           .map { Mutation.setRepos($0, nextPage: $1) },
  13.       ])
  15.     case .loadNextPage:
  16.       guard !self.currentState.isLoadingNextPage else { return Observable.empty() } // prevent from multiple requests
  17.       guard let page = self.currentState.nextPage else { return Observable.empty() }
  18.       return Observable.concat([
  19.         // 1) set loading status to true
  20.         Observable.just(Mutation.setLoadingNextPage(true)),
  22.         // 2) call API and append repos
  23.         self.search(query: self.currentState.query, page: page)
  24.           .takeUntil(self.action.filter(isUpdateQueryAction))
  25.           .map { Mutation.appendRepos($0, nextPage: $1) },
  27.         // 3) set loading status to false
  28.         Observable.just(Mutation.setLoadingNextPage(false)),
  29.       ])
  30.     }
  31.   }
  • 当用户输入一个新的搜索关键字时，就从服务器请求 repos，然后转换成更新 repos 事件（Mutation）。
  • 当用户触发加载下页时，就从服务器请求 repos，然后转换成添加 repos 事件。

reduce()

reduce() 通过旧的 State 以及 Mutation 创建一个新的 State：

  1. func reduce(state: State, mutation: Mutation) -> State {
  2.   switch mutation {
  3.   case let .setQuery(query):
  4.     var newState = state
  5.     newState.query = query
  6.     return newState
  8.   case let .setRepos(repos, nextPage):
  9.     var newState = state
  10.     newState.repos = repos
  11.     newState.nextPage = nextPage
  12.     return newState
  14.   case let .appendRepos(repos, nextPage):
  15.     var newState = state
  16.     newState.repos.append(contentsOf: repos)
  17.     newState.nextPage = nextPage
  18.     return newState
  20.   case let .setLoadingNextPage(isLoadingNextPage):
  21.     var newState = state
  22.     newState.isLoadingNextPage = isLoadingNextPage
  23.     return newState
  24.   }
  25. }
  • setQuery 更新搜索关键字
  • setRepos 更新搜索结果，以及下一页页数
  • appendRepos 添加搜索结果，以及下一页页数
  • setLoadingNextPage 设置是否正在加载下一页

bind(reactor:)

在 View 层进行用户输入绑定和状态输出绑定：

  1. func bind(reactor: GitHubSearchViewReactor) {
  2.   // Action
  3.   searchBar.rx.text
  4.     .throttle(0.3, scheduler: MainScheduler.instance)
  5.     .map { Reactor.Action.updateQuery($0) }
  6.     .bind(to: reactor.action)
  7.     .disposed(by: disposeBag)
  9.   tableView.rx.contentOffset
  10.     .filter { [weak self] offset in
  11.       guard let `self` = self else { return false }
  12.       guard self.tableView.frame.height > 0 else { return false }
  13.       return offset.y + self.tableView.frame.height >= self.tableView.contentSize.height - 100
  14.     }
  15.     .map { _ in Reactor.Action.loadNextPage }
  16.     .bind(to: reactor.action)
  17.     .disposed(by: disposeBag)
  19.   // State
  20.   reactor.state.map { $0.repos }
  21.     .bind(to: tableView.rx.items(cellIdentifier: "cell")) { indexPath, repo, cell in
  22.       cell.textLabel?.text = repo
  23.     }
  24.     .disposed(by: disposeBag)
  26.   // View
  27.   tableView.rx.itemSelected
  28.     .subscribe(onNext: { [weak self, weak reactor] indexPath in
  29.       guard let `self` = self else { return }
  30.       self.tableView.deselectRow(at: indexPath, animated: false)
  31.       guard let repo = reactor?.currentState.repos[indexPath.row] else { return }
  32.       guard let url = URL(string: "https://github.com/\(repo)") else { return }
  33.       let viewController = SFSafariViewController(url: url)
  34.       self.present(viewController, animated: true, completion: nil)
  35.     })
  36.     .disposed(by: disposeBag)
  37. }
  • 将用户更改输入关键字行为绑定到用户行为上
  • 将用户要求加载下一页行为绑定到用户行为上
  • 将搜索结果输出到列表页上
  • 当用户点击某一条搜索结果是，用 Safari 打开链接

整体结构

我们已经了解 ReactorKit 每一个组件的功能了，现在我们看一下完整的核心代码：

GitHubSearchViewReactor.swift

  1. final class GitHubSearchViewReactor: Reactor {
  2.   enum Action {
  3.     case updateQuery(String?)
  4.     case loadNextPage
  5.   }
  7.   enum Mutation {
  8.     case setQuery(String?)
  9.     case setRepos([String], nextPage: Int?)
  10.     case appendRepos([String], nextPage: Int?)
  11.     case setLoadingNextPage(Bool)
  12.   }
  14.   struct State {
  15.     var query: String?
  16.     var repos: [String] = []
  17.     var nextPage: Int?
  18.     var isLoadingNextPage: Bool = false
  19.   }
  21.   let initialState = State()
  23.   func mutate(action: Action) -> Observable<Mutation> {
  24.     switch action {
  25.     case let .updateQuery(query):
  26.       return Observable.concat([
  27.         // 1) set current state's query (.setQuery)
  28.         Observable.just(Mutation.setQuery(query)),
  30.         // 2) call API and set repos (.setRepos)
  31.         self.search(query: query, page: 1)
  32.           // cancel previous request when the new `.updateQuery` action is fired
  33.           .takeUntil(self.action.filter(isUpdateQueryAction))
  34.           .map { Mutation.setRepos($0, nextPage: $1) },
  35.       ])
  37.     case .loadNextPage:
  38.       guard !self.currentState.isLoadingNextPage else { return Observable.empty() } // prevent from multiple requests
  39.       guard let page = self.currentState.nextPage else { return Observable.empty() }
  40.       return Observable.concat([
  41.         // 1) set loading status to true
  42.         Observable.just(Mutation.setLoadingNextPage(true)),
  44.         // 2) call API and append repos
  45.         self.search(query: self.currentState.query, page: page)
  46.           .takeUntil(self.action.filter(isUpdateQueryAction))
  47.           .map { Mutation.appendRepos($0, nextPage: $1) },
  49.         // 3) set loading status to false
  50.         Observable.just(Mutation.setLoadingNextPage(false)),
  51.       ])
  52.     }
  53.   }
  55.   func reduce(state: State, mutation: Mutation) -> State {
  56.     switch mutation {
  57.     case let .setQuery(query):
  58.       var newState = state
  59.       newState.query = query
  60.       return newState
  62.     case let .setRepos(repos, nextPage):
  63.       var newState = state
  64.       newState.repos = repos
  65.       newState.nextPage = nextPage
  66.       return newState
  68.     case let .appendRepos(repos, nextPage):
  69.       var newState = state
  70.       newState.repos.append(contentsOf: repos)
  71.       newState.nextPage = nextPage
  72.       return newState
  74.     case let .setLoadingNextPage(isLoadingNextPage):
  75.       var newState = state
  76.       newState.isLoadingNextPage = isLoadingNextPage
  77.       return newState
  78.     }
  79.   }
  81.   ...
  82. }

GitHubSearchViewController.swift

  1. class GitHubSearchViewController: UIViewController, View {
  2.   @IBOutlet var searchBar: UISearchBar!
  3.   @IBOutlet var tableView: UITableView!
  5.   var disposeBag = DisposeBag()
  7.   override func viewDidLoad() {
  8.     super.viewDidLoad()
  9.     tableView.contentInset.top = 44 // search bar height
  10.     tableView.scrollIndicatorInsets.top = tableView.contentInset.top
  11.   }
  13.   func bind(reactor: GitHubSearchViewReactor) {
  14.     // Action
  15.     searchBar.rx.text
  16.       .throttle(0.3, scheduler: MainScheduler.instance)
  17.       .map { Reactor.Action.updateQuery($0) }
  18.       .bind(to: reactor.action)
  19.       .disposed(by: disposeBag)
  21.     tableView.rx.contentOffset
  22.       .filter { [weak self] offset in
  23.         guard let `self` = self else { return false }
  24.         guard self.tableView.frame.height > 0 else { return false }
  25.         return offset.y + self.tableView.frame.height >= self.tableView.contentSize.height - 100
  26.       }
  27.       .map { _ in Reactor.Action.loadNextPage }
  28.       .bind(to: reactor.action)
  29.       .disposed(by: disposeBag)
  31.     // State
  32.     reactor.state.map { $0.repos }
  33.       .bind(to: tableView.rx.items(cellIdentifier: "cell")) { indexPath, repo, cell in
  34.         cell.textLabel?.text = repo
  35.       }
  36.       .disposed(by: disposeBag)
  38.     // View
  39.     tableView.rx.itemSelected
  40.       .subscribe(onNext: { [weak self, weak reactor] indexPath in
  41.         guard let `self` = self else { return }
  42.         self.tableView.deselectRow(at: indexPath, animated: false)
  43.         guard let repo = reactor?.currentState.repos[indexPath.row] else { return }
  44.         guard let url = URL(string: "https://github.com/\(repo)") else { return }
  45.         let viewController = SFSafariViewController(url: url)
  46.         self.present(viewController, animated: true, completion: nil)
  47.       })
  48.       .disposed(by: disposeBag)
  49.   }
  50. }

这是使用 ReactorKit 重构以后的 Github Search。ReactorKit 分层非常详细，分工也是非常明确的。当你在处理大型应用程序时，这可以帮助你更好的管理代码。