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

Reduxを取り入れて開発はpairs開発はどう変わったか

satoshin21
November 14, 2018

 Reduxを取り入れて開発はpairs開発はどう変わったか

Matching dev meetup #1

satoshin21

November 14, 2018
Tweet

More Decks by satoshin21

Other Decks in Technology

Transcript

  1. Copyright © 2017 eureka, Inc. All rights reserved.
    What did the Redux Architecture change pairs development?
    ReduxΛऔΓೖΕͯpairs։ൃ͸Ͳ͏
    มΘ͔ͬͨ

    View full-size slide

  2. Copyright © 2017 eureka, Inc. All rights reserved.
    2
    Introduce
    FVSFLB *OD
    1BJSTJ04"QQMJDBUJPO&OHJOFFS
    @satoshin21

    View full-size slide

  3. Copyright © 2017 eureka, Inc. All rights reserved.
    3
    Agenda
    QBJSTͷ՝୊
    3FEVYͱ͸ʁXJUI3F4XJGU
    3FEVYͰ։ൃ͸Ͳ͏มΘ͔ͬͨ

    View full-size slide

  4. Copyright © 2017 eureka, Inc. All rights reserved.
    About pairs iOS application
    pairsͷ՝୊

    View full-size slide

  5. Copyright © 2017 eureka, Inc. All rights reserved.
    6
    pairsͷ՝୊ - MatchingܥΞϓϦ͋Δ͋Δʁ
    ͱʹ͔͘ෳࡶͳঢ়ଶ؅ཧ
    ࣗ෼ɺ͓૬खɺΩϟϯϖʔϯɺ՝ۚঢ়ଶɺΦϓγϣϯɺͦͷଞϏϡʔΠ
    ϕϯτɾɾɾFUD
    'BUͳ7JFX$POUSPMMFS
    ͍͍ͶʂɺΈͯͶʂϝοηʔδ෇͖͍͍Ͷʂϝοηʔδ෇͖ΈͯͶʂ࣭໰
    ෇͖͍͍ͶʂϓϥΠϕʔτϞʔυɺඇදࣔɺϒϩοΫͳͲͳͲɺϢʔβΞ
    Ϋγϣϯ͕༩͑ΔӨڹ͕޿ൣғ

    View full-size slide

  6. Copyright © 2017 eureka, Inc. All rights reserved.
    7
    pairsͷ՝୊ - ͱΓ͋͑ͣࠓͷঢ়ଶ
    Ϣʔβͷঢ়ଶ؅ཧ͸$PSF%BUBΛத৺ͱͯ͠/4'FUDIFE3FTVMUT$POUSPMMFS
    ͷΑ͏ͳܗͰಉظ $PSF4UPSFͱ͍͏௒ศརͳϥΠϒϥϦΛར༻

    6*7JFX$POUSPMMFSଆͰঢ়ଶ؅ཧ
    3Y4XJGU
    ΞϓϦશମΛ·͙ͨετϦʔϜͷ؅ཧ͕ਏ͍
    DPNQMFUFEɾɾɾͩͱɾɾɾʁ

    View full-size slide

  7. Copyright © 2017 eureka, Inc. All rights reserved.
    8
    pairsͷ՝୊ - ΑΓϚΫϩͳ՝୊͸ͪ͜Β
    https://goo.gl/d5Af8m

    View full-size slide

  8. Copyright © 2017 eureka, Inc. All rights reserved.
    9
    pairsԿ͕ղܾ͍͔ͨ͠ʁ
    ঢ়ଶ؅ཧɺಛʹ7JFXʹؔΘΔঢ়ଶΛݟ΍͍ͨ͘͢͠
    ϢʔβΞΫγϣϯʹΑΔঢ়ଶͷӨڹΛݟ΍͍ͨ͘͢͠
    ΞϓϦશମʹӨڹ͢Δঢ়ଶΛݟ௨͠΍͍ͨ͘͢͠

    View full-size slide

  9. Copyright © 2017 eureka, Inc. All rights reserved.
    What is Redux?
    Reduxͱ͸ʁ

    View full-size slide

  10. ঢ়ଶͷมԽΛܶతʹݟ௨͠қ͘͢Δ
    GUI Architecture

    View full-size slide

  11. https://github.com/ReSwift/ReSwift

    View full-size slide

  12. ྫ͑͹ɺϢʔβͷ௥ՃಡΈࠐΈ

    View full-size slide

  13. "QQFOE6TFS"DUJPO
    $SFBUPS
    7JFX$POUSPMMFS
    "QQ4UPSF
    "QQ4UBUF
    6TFS4FBSDI4UBUF
    "QQ3FEVDFS 6TFS4FBSDI3FEVDFS
    .JEEMFXBSF

    View full-size slide

  14. "QQFOE6TFS"DUJPO
    $SFBUPS
    6TFS4FBSDI
    7JFX$POUSPMMFS
    "QQ4UPSF
    "QQ4UBUF
    6TFS4FBSDI4UBUF
    "QQ3FEVDFS 6TFS4FBSDI3FEVDFS
    .JEEMFXBSF
    Լ·ͰεΫϩʔϧͨ͠
    ௥ՃಡΈࠐΈ͕ඞཁͳ৔
    ߹͸ΞΫγϣϯΛൃߦ

    View full-size slide

  15. "QQFOE6TFS"DUJPO
    $SFBUPS
    6TFS4FBSDI
    7JFX$POUSPMMFS
    "QQ4UPSF
    "QQ4UBUF
    6TFS4FBSDI4UBUF
    "QQ3FEVDFS 6TFS4FBSDI3FEVDFS
    .JEEMFXBSF
    "1*ϦΫΤετ
    ੒ޭ࣌͸
    6QEBUF%BUB4PVSDF"DUJPO
    ࣦഊ࣌͸
    'BJMFE3FRVFTU"DUJPO
    ൃߦ

    View full-size slide

  16. "QQFOE6TFS"DUJPO
    $SFBUPS
    6TFS4FBSDI
    7JFX$POUSPMMFS
    "QQ4UPSF
    "QQ4UBUF
    6TFS4FBSDI4UBUF
    "QQ3FEVDFS 6TFS4FBSDI3FEVDFS
    .JEEMFXBSF
    4UBUFͷ࣋ͭ<6TFS>ʹ
    BQQFOE

    View full-size slide

  17. "QQFOE6TFS"DUJPO
    $SFBUPS
    6TFS4FBSDI
    7JFX$POUSPMMFS
    "QQ4UPSF
    "QQ4UBUF
    6TFS4FBSDI4UBUF
    "QQ3FEVDFS 6TFS4FBSDI3FEVDFS
    .JEEMFXBSF
    4UBUF͕ߋ৽͞Εͨࢫ
    ௨஌

    View full-size slide

  18. Copyright © 2017 eureka, Inc. All rights reserved.
    20
    Redux - Three Principles
    4JOHMFTPVSDFPGUSVUI
    Ұͭͷ৴པͰ͖Διʔε
    4UBUFJTSFBEPOMZ
    εςʔτ͸ಡΈऔΓ͚ͩɻΞΫγϣϯͰมߋ͢Δ
    $IBOHFTBSFNBEFXJUIQVSFGVODUJPO
    ७ਮؔ਺Ͱมߋ͢Δ https://redux.js.org/introduction/threeprinciples

    View full-size slide

  19. Copyright © 2017 eureka, Inc. All rights reserved.
    21
    Single Source of truth
    "QQ4UBUF
    6TFS4FBSDI4UBUF 1SPpMF&EJU4UBUF 1BSUOFS-JLF4UBUF

    View full-size slide

  20. Copyright © 2017 eureka, Inc. All rights reserved.
    22
    Single Source of truth
    "QQ4UBUF
    let mainStore: Store = .init(reducer: App.reducer,
    state: nil,
    middleware: [App.middleware])
    extension App {
    struct State: StateType {
    var userSearchState: UserSearch.State
    var profileEditState: ProfileEdit.State
    var partnerLikeState: PartnerLike.State
    }
    }
    -
    6TFS4FBSDI4UBUF 1SPpMF&EJU4UBUF 1BSUOFS-JLF4UBUF

    View full-size slide

  21. Copyright © 2017 eureka, Inc. All rights reserved.
    23
    State is read-only
    6TFS4FBSDI
    7JFX$POUSPMMFS
    6TFS4FBSDI4UBUF
    6TFS4FBSDI
    7JFX$POUSPMMFS
    6TFS4FBSDI4UBUF
    4UPSFEJTQBUDI @

    View full-size slide

  22. Copyright © 2017 eureka, Inc. All rights reserved.
    24
    State is read-only
    6TFS4FBSDI
    7JFX$POUSPMMFS
    6TFS4FBSDI4UBUF
    6TFS4FBSDI
    7JFX$POUSPMMFS
    6TFS4FBSDI4UBUF
    6TFS4FBSDI3FEVDFS
    self.collectionView.rx
    .scrolledToEnd(offset: UserCell.preferredSize.height * 10)
    .subscribe(
    onNext: { _ in
    mainStore.dispatch(UserSearch.RequestUserAction(type: .append))
    })
    .disposeOnEnd()

    View full-size slide

  23. Copyright © 2017 eureka, Inc. All rights reserved.
    25
    Changes are made with pure function
    "QQFOE6TFS"DUJPO 6TFS4FBSDI4UBUF
    "QQFOE6TFS"DUJPO 6TFS4FBSDI4UBUF
    6TFS4FBSDI3FEVDFS

    View full-size slide

  24. Copyright © 2017 eureka, Inc. All rights reserved.
    26
    Changes are made with pure function
    "QQFOE6TFS"DUJPO 6TFS4FBSDI4UBUF
    "QQFOE6TFS"DUJPO 6TFS4FBSDI4UBUF
    6TFS4FBSDI3FEVDFS
    private static func userSearchReducer(action: Action, state: UserSearch.State?) ->
    UserSearch.State {
    var state: UserSearch.State = state ?? UserSearch.State()
    switch action {
    case let refreshed as UserSearch.RefreshDataSourceAction:
    state.dataSource = refreshed.makeDataSource()
    }
    return state
    }

    View full-size slide

  25. Copyright © 2017 eureka, Inc. All rights reserved.
    What did Redux change?
    ReduxͰ։ൃ͸Ͳ͏มΘ͔ͬͨ

    View full-size slide

  26. Copyright © 2017 eureka, Inc. All rights reserved.
    28
    ReduxͰ։ൃ͸Ͳ͏มΘ͔ͬͨʁ
    7JFX$POUSPMMFS͔Βঢ়ଶΛ੾Γग़͢͜ͱ͕Ͱ͖ͨ
    جຊతʹ7JFXଆ͸4UBUFͷมԽΛਖ਼͘͠ϨΠΞ΢τʹ൓ө͍ͯ͠Δ͜ͱͩ
    ͚Λؾʹ͢Ε͹Α͘ͳͬͨ
    4UBUFʹӨڹΛ༩͑͏ΔΠϕϯτ͕ܶతʹݟ΍͘͢ͳͬͨ
    SFEVDFS
    https://redux.js.org/introduction/threeprinciples

    View full-size slide

  27. Copyright © 2017 eureka, Inc. All rights reserved.
    29
    Redux + Rxʹ͓͚Δ՝୊
    3FEVY͸Ϣʔβ୯Ґͷঢ়ଶ؅ཧʹ͸޲͔ͳ͍ʁ
    Ϣʔβ୯ҐͰ੾ΓସΘΔঢ়ଶΛ4UBUFͰͲ͏͔࣋ͭ

    View full-size slide

  28. Copyright © 2017 eureka, Inc. All rights reserved.
    30
    Redux஫ҙ఺
    ʮ4UBUF͕มΘͬͨʯ͜ͱΛͲ͏൑அ͢Δ͔
    &RVBUBCMFͷద߹ɺDMBTTʹ஫ҙ
    Ӭԕʹ4UBUF͕ߋ৽͞Εଓ͚Δݒ೦
    "DUJPOʹඥͮ͘ॲཧʹ͸޲͔ͳ͍ ࠙਌ձͰͲ͏΍ͬͯΔͷ͔ฉ͖͍ͨ

    3PVUFSύλʔϯͳͲͱ૊Έ߹ΘͤΔʁ

    View full-size slide

  29. Thank you
    IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM

    View full-size slide