ReactorKit-小白学习笔记

来自小白对ReactorKit使用的最直观感受：Reactor和UI相互独立。Reactor的最大的作用就是将业务逻辑从View中抽离出来，可以让我们代码分工变的更加清晰明朗，多人开发时也便于后期的管理和维护。其次上手很快,只要遵守了协议往里面按需填内容就好了.

ReactorKit：iOS单向数据流构架

ReactorKit是一个面向响应式单向 Swift 应用程序架构的框架。在 ReactorKit 框架中，用户动作和视图状态都是通过可观测的流传递给每一层。这些流是单向的，因此，视图只能发出动作，而响应者只能发出状态，如下图所示：

image.png

• View
  View为数据展示层，不管是UIViewController还是UIView都可以看作是UIView。UIView主要是负责发出Action，同时将State绑定到UI组件上。

• Action
  Action表示用户在 View 上的行为。

• State
  State代表视图当前的状态。View根据当前的状态更新UI。

• Reactor
  Reactor 接收到 View 层发出的 Action，然后通过内部操作，将 Action 转换为 State。

简言之：View发出的 Action ，经由 Reactor 处理后，由 State 抛出后绑定到 View 上，每一个状态的改变都要派发一个 Action 。

View

前面我们有提到View为数据展示层，不管是UIViewController还是UIView都可以看作是UIView。定义一个 View 只需要让它遵循 ReactorKit 的 View 或 StoryboardView 协议就可以啦。

• 如果 ViewController 是纯代码开发的：则其遵守 View 协议。
• 如果 ViewController 是 Storyboard 开发的：则其遵守 StoryboardView 协议。

在查看代码的时候，我发现：

public protocol _ObjCStoryboardView {
  func performBinding()
}

// 重点哦
public protocol StoryboardView: View, _ObjCStoryboardView {
}

extension StoryboardView {
  public var reactor: Reactor? {
    get { return self.associatedObject(forKey: &reactorKey) }
    set {
      self.setAssociatedObject(newValue, forKey: &reactorKey)
      self.isReactorBinded = false
      self.disposeBag = DisposeBag()//划重点，要考试！！！
      self.performBinding()//这里也是重点，勾起来～
    }
  }

  fileprivate var isReactorBinded: Bool {
    get { return self.associatedObject(forKey: &isReactorBindedKey, default: false) }
    set { self.setAssociatedObject(newValue, forKey: &isReactorBindedKey) }
  }

  public func performBinding() {
    guard let reactor = self.reactor else { return }
    guard !self.isReactorBinded else { return }
    guard !self.shouldDeferBinding(reactor: reactor) else { return }//重点
    self.bind(reactor: reactor)//嘿～重点哦~
    self.isReactorBinded = true
  }
 //重点
  fileprivate func shouldDeferBinding(reactor: Reactor) -> Bool {
    #if !os(watchOS)
      return (self as? OSViewController)?.isViewLoaded == false
    #else
      return false
    #endif
  }
}

public protocol View: class, AssociatedObjectStore {
  associatedtype Reactor: ReactorKit.Reactor

  var disposeBag: DisposeBag { get set }
  var reactor: Reactor? { get set }
  func bind(reactor: Reactor)
}

// MARK: - Associated Object Keys
var reactorKey = "reactor"
var isReactorBindedKey = "isReactorBinded"

// MARK: - Default Implementations
extension View {
  public var reactor: Reactor? {
    get { return self.associatedObject(forKey: &reactorKey) }
    set {
      self.setAssociatedObject(newValue, forKey: &reactorKey)//后面手贱点击的代码
      self.disposeBag = DisposeBag()//不用多说，是重点知识
      if let reactor = newValue {
        self.bind(reactor: reactor)//这里也是重点知识，必考知识点哦
      }
    }
  }
}

上面标注重点知识点的地方得出的考点大概有以下几点(排名不分先后)：

1. 当 reactor 属性被设置时，bind(reactor:) 方法就会被调用。
2. 每次reactor属性被设置时，国家不会给你分配女朋友但是会给你分配一个新的disposeBag
3. StoryboardView协议只继承了View协议,没有其它实现。
4. StoryboardView协议与View协议的不同是内部调用bind(reactor:)调用时机。在StorybarodView协议中,bind(reactor:)的调用时机被调整为ViewDidLoad()以后。大概好像似乎是因为从Storyboard生成UIViewController的话，在init的阶段在Storyboard上追加的subView还没被生成，以bind(reactor:)访问那些的subView的话运行器发生时间错误。

怪我手贱，点开了 self.setAssociatedObject(newValue, forKey: &reactorKey)，然后发现 Swift的 protocol extension 具有给实现协议的人动态添加一个属性（依赖）这个能力，它是采用了 runtime的实现方式。

 func setAssociatedObject<T>(_ object: T?, forKey key: UnsafeRawPointer) {
    objc_setAssociatedObject(self, key, object, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
  }

扯远了 回归主题……

Reactor的代码结构

每一个View都有对应的Reactor，从View上抽离出来的逻辑都交给Reactor来处理。定义一个Reactor需要遵守Reactor的协议。

该协议定义了以下内容：

public protocol Reactor: class, AssociatedObjectStore {
  associatedtype Action
  associatedtype Mutation = Action
  associatedtype State

 /// 将用户在View上的动作绑定到这个subject
  var action: ActionSubject<Action> { get }

 /// state的初始值
  var initialState: State { get }

 ///  当前状态。该值在状态流发出新状态后更改。
  var currentState: State { get }

 /// 状态流。使用这个可观察到的来观察状态的变化
  var state: Observable<State> { get }

  /// 处理 Action 执行一些业务逻辑，并转换为 Mutation。
 /// 他的返回值是 Observable ，意味着在 Action 转换到 Mutation 的过程中可以异步执行副作用来获取结果（比如网络请求，数据库操作）。那些累死累活的工作都在这个方法里面完成。
 /// 每次触发Action时都会触发执行这个方法。
  func mutate(action: Action) -> Observable<Mutation>

  /// 通过旧的 State 以及 Mutation 创建一个新的 State。
  /// 这里不会引起副作用。
  /// 每次发出Mutation时都会调用此方法。
  func reduce(state: State, mutation: Mutation) -> State

 /// 转换不同的流，目前我主要用于调试
  func transform(action: Observable<Action>) -> Observable<Action>
  func transform(mutation: Observable<Mutation>) -> Observable<Mutation>
  func transform(state: Observable<State>) -> Observable<State>
}

看上面的代码头疼，我们把它的重要部分抽出来用表格来展示就一目了然啦啦啦啦啦……

• 四个响应属性：

定义	说明	类型
Action	View上执行的操作	枚举
Mutation	对Action的处理	枚举
State	View的状态	结构体
initialState	State的初始值	State型

Mutation感觉可以看作是Action到State的一个桥梁.

• 两个响应方法：

方法	说明
mutate(action:)	处理 Action 执行一些业务逻辑，并转换为 Mutation。
reduce(state:)	通过旧的 State 以及 Mutation 创建一个新的 State。

平时transform()方法中用的比较多的是用于调试程序（原谅我头发长见识短，平时没怎么用这些方法）：

 func transform(action: Observable<Action>) -> Observable<Action> {
        return action.debug("action")
    }

控制台打印的调试信息部分如下：

2019-06-12 22:37:55.383: action -> Event next(loadNextPage)
2019-06-12 22:37:57.562: action -> Event next(updateQuery(Optional("X")))

在有了这些基本的了解之后,我们来结合官方例子GitHubSearch来感受ReactorKit带给我们的神奇力气吧,我感觉ReactorKit的神奇魅力之一是我们按照功能的分工往里面按需塞内容就好了,上手会比较顺畅

image.png

首先整理一波需要实现的功能

1. 根据输入的关键字检索内容
2. 将搜索结果输出到界面上
3. 按需加载下一页的数据
4. 点击某个cell的时候用Safari打开链接

然后我们就按需往协议里面塞内容

• Action

enum Action {
    case updateQuery(String?)//搜索关键字变更
    case loadNextPage//加载下一页内容
  }

• State

struct State {
    var query: String?//搜索的关键字
    var repos: [String] = []//搜索的结果
    var nextPage: Int?//下一页的页数
    var isLoadingNextPage: Bool = false//是否加载下一页的内容
  }

前面有提到Mutation可以看作是Action到State的一个桥梁.

• Mutation

enum Mutation {
    case setQuery(String?)//更新搜索关键字
    case setRepos([String], nextPage: Int?)//更新搜索内容
    case appendRepos([String], nextPage: Int?)//添加搜索结果
    case setLoadingNextPage(Bool)//是否加载下一页内容
  }

• initialState
  initialState的初始化有两种通常写法:

let initialState = State()//不需要外部传值进来

let initialState: State
private let aa: T
//需要外部传值进来
init(aa: T) {
  self.aa = aa
  self.initialState = State()
}

现在就来完善reactor的核心部分,首先脏活累活当然是交给mutate()来处理,让它来处理副作用.

func mutate(action: Action) -> Observable<Mutation> {
    switch action {
    case let .updateQuery(query):
        //当用户输入一个新的搜索关键字时，就从服务器请求 repos，然后转换成更新 repos 事件（Mutation）。
      return Observable.concat([
        // 1) set current state's query (.setQuery)
        Observable.just(Mutation.setQuery(query)),

        // 2) call API and set repos (.setRepos)
        self.search(query: query, page: 1)
          // cancel previous request when the new `.updateQuery` action is fired
          .takeUntil(self.action.filter(isUpdateQueryAction))
          .map { Mutation.setRepos($0, nextPage: $1) },
      ])

    case .loadNextPage:
    //当用户触发加载下页时，就从服务器请求 repos，然后转换成添加 repos 事件。
      guard !self.currentState.isLoadingNextPage else { return Observable.empty() } // prevent from multiple requests
      guard let page = self.currentState.nextPage else { return Observable.empty() }
      return Observable.concat([
        // 1) set loading status to true
        Observable.just(.setLoadingNextPage(true)),

        // 2) call API and append repos
        self.search(query: self.currentState.query, page: page)
          .takeUntil(self.action.filter(isUpdateQueryAction))
          .map { Mutation.appendRepos($0, nextPage: $1) },

        // 3) set loading status to false
        Observable.just(.setLoadingNextPage(false)),
      ])
    }
  }

接下来就是根据上面mutation和旧的state来更新我们的state

func reduce(state: State, mutation: Mutation) -> State {
    switch mutation {
    //更新搜索关键字
    case let .setQuery(query):
      var newState = state
      newState.query = query
      return newState
    //更新搜索结果以及下一页的页数
    case let .setRepos(repos, nextPage):
      var newState = state
      newState.repos = repos
      newState.nextPage = nextPage
      return newState
    //添加搜索结果以及下一页的页数
    case let .appendRepos(repos, nextPage):
      var newState = state
      newState.repos.append(contentsOf: repos)
      newState.nextPage = nextPage
      return newState
    //是否正在加载下一页
    case let .setLoadingNextPage(isLoadingNextPage):
      var newState = state
      newState.isLoadingNextPage = isLoadingNextPage
      return newState
    }
  }

对于Reactor协议的部分我们就基本完成了,现在就是要把它和我们的vc联系在一起.
首先我们要让我们的vc遵守StoryboardView

class GitHubSearchViewController: UIViewController, StoryboardView {}

其次就是要设置reactor:

let viewController = navigationController.viewControllers.first as! GitHubSearchViewController
viewController.reactor = GitHubSearchViewReactor()//设置reactor

设置reactor会自动触发bind(reactor:) 方法.
bind(reactor:) 主要功能就是进行用户输入状态绑定和用户输出状态绑定

func bind(reactor: GitHubSearchViewReactor) {
    // Action
    //将用户更改搜索关键字的行为绑定到Action上
    searchController.searchBar.rx.text
      .throttle(0.3, scheduler: MainScheduler.instance)
      .map { Reactor.Action.updateQuery($0) }
      .bind(to: reactor.action)
      .disposed(by: disposeBag)

    //将用户要求加载下一页的行为绑定到Action上
    tableView.rx.contentOffset
      .filter { [weak self] offset in
        guard let `self` = self else { return false }
        guard self.tableView.frame.height > 0 else { return false }
        return offset.y + self.tableView.frame.height >= self.tableView.contentSize.height - 100
      }
      .map { _ in Reactor.Action.loadNextPage }
      .bind(to: reactor.action)
      .disposed(by: disposeBag)

    // State
    //将搜索结果输出到界面上
    reactor.state.map { $0.repos }
      .bind(to: tableView.rx.items(cellIdentifier: "cell")) { indexPath, repo, cell in
        cell.textLabel?.text = repo
      }
      .disposed(by: disposeBag)

    // View
    //当用户点击某个cell的时候用Safari打开链接
    tableView.rx.itemSelected
      .subscribe(onNext: { [weak self, weak reactor] indexPath in
        guard let `self` = self else { return }
        self.view.endEditing(true)
        self.tableView.deselectRow(at: indexPath, animated: false)
        guard let repo = reactor?.currentState.repos[indexPath.row] else { return }
        guard let url = URL(string: "https://github.com/\(repo)") else { return }
        let viewController = SFSafariViewController(url: url)
        self.searchController.present(viewController, animated: true, completion: nil)
      })
      .disposed(by: disposeBag)
  }

这么一来二去，一个简单的界面就完成了。棒！
不过说了这么多，小白毕竟时小白，很多地方理解不到位或者是有理解错误的地方，欢迎各位大佬指出。我不会因为自己是跆拳道黑带就不接受大家的批评与指导的。