The Composable Architecture（TCA）におけるBindingの扱い方

f:id:bamboohero:20210531024930p:plain

The Composable Architecture（TCA）のサンプルからBindingの扱い方について学びます。

今回はCaseStudiesの01-GettingStarted-Bindings-Basicsと01-GettingStarted-Bindings-Formsを例に説明します。

単方向データフローの原則を守る
Bindingを使った実装方法
BindingActionでActionを統合する
まとめ

単方向データフローの原則を守る

TCAは単方向データフローという設計思想を持っています。

データ（State）の変更は必ず、Action→Recucer→Storeという流れで行い、最後にViewにデータの変更が通知されるというものです。

一方、SwiftUIには双方向データバインディングを行うための仕組みが備わっていて、MVVMで実装する際はこれを利用してViewModel⇔Viewという双方向でデータのやり取りを行います。
このデータバインディングの機能は便利ですが、気をつけないとコードのあちこちでデータを変更することができてしまいます。データ変更があちこちで行われてしまうと、データの流れを追うのが難しくなり、バグを生む原因にもなります。

TCAでは単方向データフローを守るための仕組みをフレームワークが提供してくれていて、開発者がうっかり間違った実装をしてしまうリスクを排除してくれます。

設計原則を強制的に守らせることができるというのが魅力ですね。

Bindingを使った実装方法

サンプルの画面はこんな感じです。コンポーネントが4つありますが、ここでは3つ目のStepperと4つ目のSliderに注目します。

f:id:bamboohero:20210531024536g:plain

StepperとSliderの実装を抜き出したのがこちらです。

enum BindingBasicsAction {
  case sliderValueChanged(Double)
  case stepCountChanged(Int)
}

Stepper(
  // [1]
  value: viewStore.binding(
    get: \.stepCount, send: BindingBasicsAction.stepCountChanged),
  in: 0...100
) {
  Text("Max slider value: \(viewStore.stepCount)")
    .font(Font.body.monospacedDigit())
}

HStack {
  Text("Slider value: \(Int(viewStore.sliderValue))")
    .font(Font.body.monospacedDigit())
  Slider(
    value: viewStore.binding(
      // [2]
      get: \.sliderValue, send: BindingBasicsAction.sliderValueChanged),
    in: 0...Double(viewStore.stepCount)
  )
}

[1]
ViewStore.binding(get:send:)でBindingを生成します。
get:にはViewStoreが持っているStateを取り出す関数もしくはKeyPathを指定します。
send:にはActionを指定します。画面操作でStepperの値が変更されたときに、ここで指定したActionが送信されます。

[2]
[1]と同じです。Sliderの値変更時にActionが送信されます。

ViewStore.binding(get:send:)の実装を覗いてみましょう。

public func binding<LocalState>(
  get: @escaping (State) -> LocalState,
  send localStateToViewAction: @escaping (LocalState) -> Action
) -> Binding<LocalState> {
  Binding(
    get: { get(self.state) },
    set: { newLocalState, transaction in
      // [1]
      if transaction.animation != nil {
        withTransaction(transaction) {
          self.send(localStateToViewAction(newLocalState))
        }
      } else {
        self.send(localStateToViewAction(newLocalState))
      }
    }
  )
}

[1]
StepperやSliderがユーザ操作を検知したとき、Stateの値を直接書き換えるのではなく、Actionを送信するようになっています。

ビューではViewStoreが持つStateを参照することはできますが、この値を書き換えることはできませんし、Bindingにおいても値を直接書き換えるのではなくActionを送信するようにしています。先述した単方向データフローがきっちりと守られていますね

Stateの変更は最終的にReducerが行います。Recucerの実装は以下のようになっています。

let bindingBasicsReducer = Reducer<
  BindingBasicsState, BindingBasicsAction, BindingBasicsEnvironment
> {
  state, action, _ in
  switch action {
  case let .sliderValueChanged(value):
    state.sliderValue = value
    return .none

  case let .stepCountChanged(count):
    // [1]
    state.sliderValue = .minimum(state.sliderValue, Double(count))
    state.stepCount = count
    return .none

  // ...（以下省略）

[1]
本サンプルでは、SliderはstepCountより大きい値を指定することはできないという仕様になっています。このようなドメインのロジックはReducerに閉じ込めるというのがTCAにおけるルールです。

BindingActionでActionを統合する

上記の例では、StepperとSliderそれぞれに対してstepCountChangedとsliderValueChangedというActionが定義されていました。

これだと全てのUIコントロールに対してActionを定義しなければなりませんが、TCAはこれらを一つに統合できるBindingActionという仕組みを提供しています。

BindingActionを使用すると、実装は以下のように変わります。

enum BindingFormAction: Equatable {
  // [1]
  case binding(BindingAction<BindingFormState>)
}

Stepper(
  // [2]
  value: viewStore.binding(keyPath: \.stepCount, send: BindingFormAction.binding),
  in: 0...100
) {
  Text("Max slider value: \(viewStore.stepCount)")
    .font(Font.body.monospacedDigit())
}

HStack {
  Text("Slider value: \(Int(viewStore.sliderValue))")
    .font(Font.body.monospacedDigit())
  Slider(
    // [2]
    value: viewStore.binding(keyPath: \.sliderValue, send: BindingFormAction.binding),
    in: 0...Double(viewStore.stepCount)
  )
}

[1]
BindingAction型のAssociatedValueを持つケースが一つだけ定義されています。

[2]
StepperとSliderのBindingではどちらも同じActionが指定されています。

Reducerの実装はこう変わります。

let bindingFormReducer = Reducer<
  BindingFormState, BindingFormAction, BindingFormEnvironment
> {
  state, action, _ in
  switch action {
  // [1]
  case .binding(\.stepCount):
    state.sliderValue = .minimum(state.sliderValue, Double(state.stepCount))
    return .none

  // [2]
  case .binding:
    return .none

  // ...（以下省略）