TCA v0.19.0からのSwitchStore/CaseLetが良い

#potatotips 74の資料です

https://potatotips.connpass.com/event/214754/

Transcript

1. TCA v0.19.0͔Βͷ
   SwitchStore/CaseLet͕ྑ͍
   QPUBUPUJQT
   @yimajo
   ͞Β͹͢΂ͯͷ*G-FU4UPSFʹΑΔը໘දࣔ੾Γସ͑
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. w ిࢠॻ੶$PNCJOFΨΠυϒοΫΛ
   ॻ͖·ͨ͠ͷͰങ͍ͬͯͩ͘͞
   w IUUQTTXJGUCPPUIQN
   w 5$"Λ࢓ࣄͰ΍ͬͯͯɺ΋ͬͱ஌
   Γ͍ͨͱ͔ɺ৽͘͠΍͖͍ͬͯͨͱ
   ͍͏૊৫ͷਓ͸!ZJNBKP·Ͱ%.
   ͔ϝʔϧΛ͍ͯͩ͘͠͞
   

   View Slide

4. ຊ୊
   

   View Slide

5. Effect
   View
   Store
   DI
   Environment
   TCA ( The Composable Architecture )ͱ͸
   w J04ΞϓϦ։ൃͷͨΊͷ3FEVY෩
   ຯͳ044
   w "QQMFͷެࣜϦΞΫςΟϒϓϩά
   ϥϛϯάϑϨʔϜϫʔΫͰ͋Δ
   $PNCJOFΛར༻͍ͯ͠Δ
   Reducerʢؔ਺ʣ
   State
   Action
   Combine
   
   
   @Published
   Combine
   
   
   Publisher
   

   View Slide

6. v0.19.0
   w FOVNͳ4UBUFʹରԠ͢ΔDBTFQBUIͷ
   3FEVDFSQVMMCBDL͕௥Ճ
   w FOVNͳ4UBUFΛݸʑͷ4UBUFʹม׵͢Δ
   4XJUDI4UPSFͷ௥Ճ
   w &
   ff
   FDUUJNFS͕DBODFM*O'MJHIUUSVFΛݺͼग़ͤΔΑ
   ͏ʹͳΓɺࣗಈతʹDBODFMMBCMFJE͕ಉ͡ͳΒ
   DBODFMͰ͖Δɻ
   w 'PS&BDI4UPSF͕վྑ
   

   View Slide

7. v0.19.0ͷ
   
   
   SwichStoreͱCaseLetʹ͍ͭͯ
   
   
   ExampleͷTicTacToeͰઆ໌
   

   View Slide

8. -PHJO
   7JFX
   /FX
   (BNF
   7JFX
   ىಈ
   ϩάΠϯ׬ྃ
   TicTacToeʢ3໨ฒ΂ʣήʔϜ
   

   View Slide

9. public enum AppState: Equatable {
   
   
   case login(LoginState)
   
   
   case newGame(NewGameState)
   
   
   public init() { self = .login(.init()) }
   
   
   }
   public struct AppState: Equatable {
   
   
   public var login: LoginState? = LoginState()
   
   
   public var newGame: NewGameState?
   
   
   public init() {}
   
   
   }
   public var body: some View {
   
   
   SwitchStore(self.store) {
   
   
   CaseLet(
   
   
   state: /AppState.login, action: AppAction.login
   
   
   ) { store in
   
   
   NavigationView {
   
   
   LoginView(store: store)
   
   
   }
   
   
   .navigationViewStyle(StackNavigationViewStyle())
   
   
   }
   
   
   CaseLet(
   
   
   state: /AppState.newGame, action: AppAction.newGame
   
   
   ) { store in
   
   
   NavigationView {
   
   
   NewGameView(store: store)
   
   
   }
   
   
   .navigationViewStyle(StackNavigationViewStyle())
   
   
   }
   
   
   }
   @ViewBuilder public var body: some View {
   
   
   IfLetStore(
   
   
   self.store.scope(state: \.login, action: AppAction.login)
   
   
   ) { store in
   
   
   NavigationView {
   
   
   LoginView(store: store)
   
   
   }
   
   
   .navigationViewStyle(StackNavigationViewStyle())
   
   
   }
   
   
   IfLetStore(
   
   
   self.store.scope(state: \.newGame, action: AppAction.newGame)
   
   
   ) { store in
   
   
   NavigationView {
   
   
   NewGameView(store: store)
   
   
   }
   
   
   .navigationViewStyle(StackNavigationViewStyle())
   
   
   }
   
   
   }
   Ҏલͷ΍Γํ 4XJUDI4UPSF$BTF-FUͰͷ΍Γํ
   4XJGU6*7JFX 4XJGU6*7JFX
   4UBUF
   4UBUF
   

   View Slide

10. SwitchStore/CaseLet ͸
    
    
    case͕໢ཏ͞Εͯͳ͚Ε͹
    
    
    Τϥʔը໘Λදࣔͯ͘͠ΕΔ
    

    View Slide

11. SwitUI.View্Ͱ
    CaseLetͰ໢ཏͰ͖͍ͯ
    ͳ͍caseʹͳͬͨͱ͖
    ਅͬ੺ͳը໘Ͱ
    $BTF-FUهࡌ͢Δ͔%FGBVMUΛ࢖͑
    ͱܯࠂ͞ΕΔ
    

    View Slide

12. public var body: some View {
    
    
    SwitchStore(self.store) {
    
    
    CaseLet(
    
    
    state: /AppState.login, action: AppAction.login
    
    
    ) { store in
    
    
    NavigationView {
    
    
    LoginView(store: store)
    
    
    }
    
    
    .navigationViewStyle(StackNavigationViewStyle())
    
    
    }
    
    
    CaseLet(
    
    
    state: /AppState.newGame, action: AppAction.newGame
    
    
    ) { store in
    
    
    NavigationView {
    
    
    NewGameView(store: store)
    
    
    }
    
    
    .navigationViewStyle(StackNavigationViewStyle())
    
    
    }
    
    
    Default {
    
    
    Text(“ະ࣮૷: ͋ͱͰ͍͍ײ͡ʹCaseLetॻ͘”)
    
    
    }
    
    
    }
    4XJGU6*7JFX
    DefaultΛ࢖ͬͯΈΔྫ
    %FGBVMU͸։ൃ࣌͘Β͍ʹ࢖ͬͯجຊతʹ͸$BTF-FUͰ໢ཏ͠Α͏
    public enum AppState: Equatable {
    
    
    case login(LoginState)
    
    
    case newGame(NewGameState)
    
    
    case foo(FooState)
    
    
    public init() { self = .login(.init()) }
    
    
    }
    4UBUF
    

    View Slide

13. SwitchStore/CaseLetͷ
    
    
    Ԡ༻Λߟ͑ͯΈΔ
    

    View Slide

14. લఏ
    ϩάΠϯը໘͸
    ϩάΠϯࡁΈͳΒ
    දࣔ͠ͳ͍
    -PHJO
    7JFX
    /FX
    (BNF
    7JFX
    ϩάΠϯ൑ఆ
    
    
    ͯ͠
    
    
    ϩάΠϯͯͨ͠Β
    
    
    NewGameView
    ىಈ
    

    View Slide

15. -PHJO
    7JFX
    /FX
    (BNF
    7JFX
    ىಈ
    public enum AppState: Equatable {
    
    
    case launch(LaunchState)
    
    
    case login(LoginState)
    
    
    case newGame(NewGameState)
    
    
    public init() { self = .launch(.init()) }
    
    
    }
    -BVODI
    7JFX
    ϩάΠϯ
    
    
    ͯ͠ͳ͚Ε͹
    
    
    LoginView
    ϩάΠϯͯ͠Ε͹
    
    
    NewGameView
    Ԡ༻ྫ1
    LaunchViewͰΞχϝʔγϣϯͱ͔Ͱ͖Δ
    

    View Slide

16. ىಈ
    public struct AppState: Equatable {
    
    
    enum Scene: Equatable {
    
    
    case login(LoginState)
    
    
    case newGame(NewGameState)
    
    
    }
    
    
    
    
    var scene: Scene
    
    
    var flag: Bool // ڞ௨ͳԿ͔
    
    
    public init(
    
    
    scene: Scene = .loginCore(.init())
    
    
    flag: Bool = false
    
    
    ) {
    
    
    self.scene = scene
    
    
    self.flag = flag
    
    
    }
    
    
    }
    4UBUF
    -PHJO
    7JFX
    /FX
    (BNF
    7JFX
    ϩάΠϯ൑ఆ
    
    
    ͯ͠
    
    
    NewGameView
    Ԡ༻ྫ2
    ୹ॴ: CathPathͷ࢓༷Λཧղ͠ͳ͍ͱೲಘͰ͖ͳ͍΍ΓํʹͳΔ
    

    View Slide

17. ىಈ
    public struct RootState: Equatable {
    
    
    var appCore: AppCoreState
    
    
    var flag: Bool // ڞ௨ͳԿ͔
    
    
    public init(
    
    
    appCore: AppCoreState = .loginState(.init())
    
    
    flag: Bool = false
    
    
    ) {
    
    
    self.appCore = appCore
    
    
    self.flag = flag
    
    
    }
    
    
    }
    
    
    let reducer = Reducer.combine(
    
    
    appCoreReducer(
    
    
    // …
    
    
    ),
    
    
    Reducer {
    
    
    // …
    
    
    }
    
    
    )
    4UBUF
    -PHJO
    7JFX
    /FX
    (BNF
    7JFX
    ϩάΠϯ൑ఆ
    
    
    ͯ͠
    
    
    NewGameView
    Ԡ༻ྫ2.1
    public enum AppCoreState: Equatable {
    
    
    case login(LoginState)
    
    
    case newGame(NewGameState)
    
    
    }
    
    
    public enum AppCoreAction: Equatable {
    
    
    case login(LoginAction)
    
    
    case newGame(NewGameAction)
    
    
    }
    $PSFͱͯ͠FOVN4UBUFʹ͢Δ͕3PPU͸TUSVDU
    

    View Slide

18. ൃද͸Ҏ্Ͱ͢🙇
    ʮ͞Β͹͢΂ͯͷ*G-FU4UPSFʹΑΔը໘දࣔ੾Γସ͑ʯ
    ͱ͍͏αϒλΠτϧͰ͕ͨ͠ɺ
    $BTF-FUͷͳ͔Ͱ͸*G-FU4UPSF͕࢖ΘΕ͍ͯ·͢ɻ
    

    View Slide