Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactorKit at Wantedly

ReactorKit at Wantedly

28.Jun.2018 ReactorKit Meetup Japan
https://wantedly.connpass.com/event/90261/

Jiro Nagashima

June 28, 2018
Tweet

More Decks by Jiro Nagashima

Other Decks in Technology

Transcript

  1. ©2018 Wantedly, Inc.
    ReactorKit at Wantedly
    ReactorKit Meetup Japan
    28.Jun.2018 - Jiro Nagashima

    View full-size slide

  2. ©2018 Wantedly, Inc.
    ReactorKit is simple and powerful
    Page Title Page Subtitle

    View full-size slide

  3. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Jiro Nagashima
    @hedjirog
    Software Engineer
    Wantedly Visit App

    View full-size slide

  4. ©2018 Wantedly, Inc. https://wantedlyinc.com/ja/products

    View full-size slide

  5. ©2018 Wantedly, Inc.
    An app which requires
    a lot of state management
    search, profile, chat, etc…
    Page Title Page Subtitle

    View full-size slide

  6. ©2018 Wantedly, Inc.
    ReactorKit took care of it all ❤
    Page Title Page Subtitle

    View full-size slide

  7. ©2018 Wantedly, Inc.
    2017
    Page Title Page Subtitle
    2018
    Used in one screen
    Used everywhere

    View full-size slide

  8. ©2018 Wantedly, Inc.
    ReactorKit is simple
    Page Title Page Subtitle

    View full-size slide

  9. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc. https://github.com/ReactorKit/ReactorKit#basic-concept

    View full-size slide

  10. ©2018 Wantedly, Inc.
    Less typing
    Easy to understand
    Easy to code review
    ReactorKit is simple, therefore

    View full-size slide

  11. ©2018 Wantedly, Inc.
    ReactorKit is powerful
    Page Title Page Subtitle

    View full-size slide

  12. ©2018 Wantedly, Inc.
    Example 1
    Showing bookmarked status
    Page Title Page Subtitle

    View full-size slide

  13. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.

    View full-size slide

  14. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State

    View full-size slide

  15. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State

    View full-size slide

  16. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectViewController
    func bind(reactor: ProjectReactor) {
    // Action
    rx.methodInvoked(#selector(viewDidLoad))
    .map { _ in Reactor.Action.load }
    .bind(to: reactor.action)
    .disposed(by: disposeBag)
    // State
    reactor.state.map { $0.isBookmarking }
    .bind(to: bookmarkButton.rx.isSelected)
    .disposed(by: disposeBag)
    }

    View full-size slide

  17. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State

    View full-size slide

  18. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectReactor
    enum Action {
    case load
    }
    enum Mutation {
    case setProject(Project)
    }
    struct State {
    let projectId: Int
    var isBookmarking: Bool
    }

    View full-size slide

  19. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectReactor
    func mutate(action: Action) -> Observable {
    switch action {
    case .load:
    return projectRepository.project(id: currentState.projectId)
    .asObservable()
    .map(Mutation.setProject)
    }
    }
    func reduce(state: State, mutation: Mutation) -> State {
    var state = state
    switch mutation {
    case let .setProject(project):
    state.isBookmarking = project.bookmarked
    }
    return state
    }

    View full-size slide

  20. ©2018 Wantedly, Inc.
    Example 2
    Bookmark event propagation
    Page Title Page Subtitle

    View full-size slide

  21. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.

    View full-size slide

  22. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State
    Reactor
    View
    Action
    State
    Event Stream

    View full-size slide

  23. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State
    Reactor
    View
    Action
    State
    Event Stream

    View full-size slide

  24. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectRepository
    func bookmark(projectId: Int) -> Single {
    return provider.rx.request(.bookmark(projectId: projectId))
    .filterSuccessfulStatusCodes()
    .map { _ in }
    .do(onSubscribe: { _ in
    ProjectEvent.stream.onNext(
    .updateBookmarking(projectId: projectId, isBookmarking: true)
    )
    })
    .do(onError: { _ in
    ProjectEvent.stream.onNext(
    .updateBookmarking(projectId: projectId, isBookmarking: false)
    )
    })
    }

    View full-size slide

  25. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectReactor
    enum Action {
    case toggleBookmarking
    }
    func mutate(action: Action) -> Observable {
    switch action {
    case .toggleBookmarking:
    if currentState.isBookmarking {
    _ = projectRepository.unbookmark(projectId: currentState.projectId).subscribe()
    } else {
    _ = projectRepository.bookmark(projectId: currentState.projectId).subscribe()
    }
    return .empty()
    }
    }

    View full-size slide

  26. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Reactor
    View
    Action
    State
    Reactor
    View
    Action
    State
    Event Stream

    View full-size slide

  27. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    // ProjectCellReactor
    func transform(mutation: Observable) -> Observable {
    let projectId = currentState.projectId
    let fromProjectEvent = ProjectEvent.stream
    .flatMap { event -> Observable in
    switch event {
    case let .updateBookmarking(id, isBookmarking):
    return id == projectId ? .just(.setBookmarking(isBookmarking)) : .empty()
    }
    }
    return Observable.merge(mutation, fromProjectEvent)
    }
    func reduce(state: State, mutation: Mutation) -> State {
    var state = state
    switch mutation {
    case let .setBookmarking(isBookmarking):
    state.isBookmarking = isBookmarking
    }
    return state
    }

    View full-size slide

  28. ©2018 Wantedly, Inc.
    Example 3
    Company page
    Page Title Page Subtitle

    View full-size slide

  29. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.

    View full-size slide

  30. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Company
    Home Posts Info Projects Employees

    View full-size slide

  31. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Company
    Home Posts Info Projects Employees

    View full-size slide

  32. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
    ©2018 Wantedly, Inc.
    Company
    Home Posts Info Projects Employees
    Event Stream
    Reactor
    View
    Action
    State
    Reactor
    View
    Action
    State

    View full-size slide

  33. ©2018 Wantedly, Inc.
    Complicated state management is possible
    Covers most use cases
    ReactorKit is powerful, therefore

    View full-size slide

  34. ©2018 Wantedly, Inc.
    ReactorKit is simple and powerful
    Page Title Page Subtitle

    View full-size slide

  35. ©2018 Wantedly, Inc.
    I can wholeheartedly recommend it!
    Page Title Page Subtitle

    View full-size slide