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

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

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

    Action

    Action 用于描叙用户行为：

    • updateQuery 搜索关键字变更
    • loadNextPage 触发加载下页
    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

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

    • query 搜索关键字
    • repos 搜索结果
    • nextPage 下一页页数
    • isLoadingNextPage 是否正在加载下一页

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

    将 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))
    26.         // 3) set loading status to false
    27.         Observable.just(Mutation.setLoadingNextPage(false)),
    28.       ])
    29.     }
    30.   }
    • 当用户输入一个新的搜索关键字时，就从服务器请求 repos，然后转换成更新 repos 事件（Mutation）。
    • 当用户触发加载下页时，就从服务器请求 repos，然后转换成添加 repos 事件。

    reduce()

    • setQuery 更新搜索关键字
    • setRepos 更新搜索结果，以及下一页页数
    • appendRepos 添加搜索结果，以及下一页页数
    • setLoadingNextPage 设置是否正在加载下一页

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

    1. func bind(reactor: GitHubSearchViewReactor) {
    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. class GitHubSearchViewController: UIViewController, View {
    2.   @IBOutlet var searchBar: UISearchBar!
    3.   @IBOutlet var tableView: UITableView!
    5.   var disposeBag = DisposeBag()
    7.   override func 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. }

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