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)
  }

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,734评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,931评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,133评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,532评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,585评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,462评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,262评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,153评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,587评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,635评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,237评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2赞 354

推荐阅读更多精彩内容

  • ReactorKit架构
    ReactorKit 是一个轻量的响应式编程框架。它结合了 Flux 和响应式编程。用户行为和页面状态都是通过序列...
    FallPine阅读 2,446评论 1赞 3
  • 谈谈RxSwift和状态管理
    前段时间在RxSwift上做了一些实践，Rx确实是一个强大的工具，但同时也是一把双刃剑，如果滥用的话反而会带来副作...
    L_Zephyr阅读 4,197评论 0赞 15
  • ReactorKit 粗略源码分析
    ReactorKit作为RxSwift的框架之一，如文档描述结合了Flux思想，行为单向性，Reactor只进行行...
    那个人一定不是我阅读 640评论 0赞 0
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,101评论 1赞 32
  • RxSwift项目实践
    RxSwift-MVVM 这个项目是入坑RxSwift以来的一些收获，历经多个真实项目的实践。我也一直在为写出简洁...
    ripple_k阅读 1,318评论 0赞 3