The Composable Architecture(TCA)

What is the Composable Architecture?

이 라이브러리는 다양한 목적과 복잡성을 가진 어플리케이션을 구축할때 사용할 수 있는 몇가지 core tool 을 제공한다. 어플리케이션을 구축할때 일상적으로 발생하는 많은 문제를 해결하기 위해 다음과 같은 설득력있는 사례를 제공한다:

State management: (상태관리)
- 간단한 값타입을 사용해 당신의 어플리케이션의 state 를 관리.
- 하나의 screen 의 변화(mutation)를 다른 screen 에서 즉시 관찰(observe)할 수 있도록 여러 screen 에서 state 를 공유하는 방법을 제공
Composition
- 커다란 기능을 작은 component로 분해.
- 분해된 component 들은 격리된 모듈로 추출할 수 있고, 기능을 구성하기 위해 쉽게 결합.
Side effects
- 어플리케이션의 특정 부분이 가능한 테스트하기 쉽고, 이해하기 쉬운 방식으로 외부와 대화(talk)하는 방법
Testing
- 아키텍쳐에 내장된 기능을 테스트할뿐만 아니라, 여러부분으로 구성된 기능에 대한 통합 테스트(integration test) 를 작성.
- side effect 가 어플리케이션에 어떤 영향을 미치는지 이해하기 위한 end-to-end test 를 작성하는 방법을 제공.
- 이를 통해 비지니스 로직이 당신의 예상대로 실행되고 있음을 강력하게 보장
Ergonomics
- 가능한 적은 컨셉과 동작 파트로 이루어진 API 만으로 위의 모든 것을 이루어준다.

Basic Usage

Composable Architecture 를 사용해 기능을 빌드하려면, 당신의 domain 을 모델링 하는 몇가지 타입과 값을 정의하라:

State:
- 당신의 기능이 동작하기 위해 logic 과 UI 를 렌더링 하는데 필요한 데이터를 설명하는 타입
Action
- 당신이 정의한 기능에서 일어날 수 있는 모든 action -- feature, user action, notification, event source 등—을 표현하는 타입
Reducer
- 앱의 현재 state 를 다음 state 로 진화시키는(evolve) 방법을 설명하는 function.
- reducer 는 또한 effect 값을 반환할 책임이 있다— API request 와 같이 Effect 값을 반환함으로써 수행할 수 있다.
Store
- 실제로 당신의 기능을 구동하는 runtime이다. 당신은 모든 유저의 action을 store 로 보내고 Store 에서 상태 변경을 관찰(observe)하여 UI 를 업데이트 할 수 있다.

Simple Example

+, - 버튼으로 숫자를 증가&감소 시키는 앱

1. 기능 정의

버튼을 누르면 해당 fact 를 alert에 표시한다고 가정한다.
해당 숫자에 대한 random fact 를 fetch 하기 위해 API request 를 한다.

2. 구현

이 기능을 구현하려면 ReducerProtocol 를 준수하여 기능의 도메인과 동작을 정의할 새로운 type 을 생성해야 한다:

import ComposableArchitecture

struct Feature: ReducerProtocol {
}

여기서 현재 카운트에 대한 integer 와, 화면에 표시할 alert 의 title 을 나타내는 optional string 로 구성된 기능의 state type 을 정의해야 한다. (nil 은 alert 을 표시하지 않음을 나타내기 때문)

struct Feature: ReducerProtocol {
  struct State: Equatable {
    var count = 0
    var numberFactAlert: String?
  }
}

또한 기능의 action 에 대한 type 을 정의해야 한다. 여기에는 감소 버튼, 증가 버튼, fact 버튼을 탭했을때와 같은 명백한 action 이 있다.

그러나 여기에는 약간 명확하지 않은 액션들도 있다. alert 을 dismiss 하거나 fact API 로 부터 응답을 받을때 발생하는 작업처럼:

struct Feature: ReducerProtocol {
  struct State: Equatable { … }
  enum Action: Equatable {
    case factAlertDismissed
    case decrementButtonTapped
    case incrementButtonTapped
    case numberFactButtonTapped
    **case numberFactResponse(TaskResult<String>)**
  }
}

그런다음 reduce method 를 구현한다. 이는 기능(feature)에 대한 실제 logic 및 동작을 처리하는 역할을 한다.

현재 state 를 next state 로 바꾸는 방법과 어떤 effect 를 실행해야 하는지 설명한다. 일부 action은 effect를 실행할 필요가 없으며, 이를 표현하기 위해 .none 을 반환한다:

struct Feature: ReducerProtocol {
  struct State: Equatable { … }
  enum Action: Equatable { … }

  func reduce(into state: inout State, action: Action) -> EffectTask<Action> {
    switch action {
      case .factAlertDismissed:
        state.numberFactAlert = nil
        return .none

      case .decrementButtonTapped:
        state.count -= 1
        return .none

      case .incrementButtonTapped:
        state.count += 1
        return .none

      case .numberFactButtonTapped:
        return .task { [count = state.count] in
          await .numberFactResponse(
            TaskResult {
              String(
                decoding: try await URLSession.shared
                  .data(from: URL(string: "http://numbersapi.com/\(count)/trivia")!).0,
                as: UTF8.self
              )
            }
          )
        }

      case let .numberFactResponse(.success(fact)):
        state.numberFactAlert = fact
        return .none

      case .numberFactResponse(.failure):
        state.numberFactAlert = "Could not load a number fact :("
        return .none
    }
  }
}

그리고 나서 마지막으로 feature 를 화면에 표시하는 view 를 정의한다.

state에 대한 모든 변경을 관찰(observe) 하고 다시 렌더링할 수 있도록 StoreOf<Feature> 을 유지한다. 그리고 우리는 state 가 변경되도록 모든 사용자 action 을 store 로 보낼수 있다.

.alert view modifier 에 필요한Identifiable 로 만들기 위해 fact alert 주위에 struct wrapper 를 도입해야 한다:

struct FeatureView: View {
  let store: StoreOf<Feature>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        HStack {
          Button("−") { viewStore.send(.decrementButtonTapped) }
          Text("\(viewStore.count)")
          Button("+") { viewStore.send(.incrementButtonTapped) }
        }

        Button("Number fact") { viewStore.send(.numberFactButtonTapped) }
      }
      .alert(
        item: viewStore.binding(
          get: { $0.numberFactAlert.map(FactAlert.init(title:)) },
          send: .factAlertDismissed
        ),
        content: { Alert(title: Text($0.title)) }
      )
    }
  }
}

struct FactAlert: Identifiable {
  var title: String
  var id: String { self.title }
}

또한 UIKit controller 를 구동(driven)하는 것도 간단하다.

UI 를 업데이트하고 alert 을 표시하기 위해 viewDidLoad 에서 store 를 구독(subscribe) 한다. 해당 코드는SwiftUI 버전보다 더 길다:

class FeatureViewController: UIViewController {
  let viewStore: ViewStoreOf<Feature>
  var cancellables: Set<AnyCancellable> = []

  init(store: StoreOf<Feature>) {
    self.viewStore = ViewStore(store)
    super.init(nibName: nil, bundle: nil)
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    let countLabel = UILabel()
    let incrementButton = UIButton()
    let decrementButton = UIButton()
    let factButton = UIButton()

    // Omitted: Add subviews and set up constraints...

    self.viewStore.publisher
      .map { "\($0.count)" }
      .assign(to: \.text, on: countLabel)
      .store(in: &self.cancellables)

    self.viewStore.publisher.numberFactAlert
      .sink { [weak self] numberFactAlert in
        let alertController = UIAlertController(
          title: numberFactAlert, message: nil, preferredStyle: .alert
        )
        alertController.addAction(
          UIAlertAction(
            title: "Ok",
            style: .default,
            handler: { _ in self?.viewStore.send(.factAlertDismissed) }
          )
        )
        self?.present(alertController, animated: true, completion: nil)
      }
      .store(in: &self.cancellables)
  }

  @objc private func incrementButtonTapped() {
    self.viewStore.send(.incrementButtonTapped)
  }
  @objc private func decrementButtonTapped() {
    self.viewStore.send(.decrementButtonTapped)
  }
  @objc private func factButtonTapped() {
    self.viewStore.send(.numberFactButtonTapped)
  }
}

앱의 진입점(entry point)에서 이 view를 화면에 표시할 준비가 되면, 우리는 store를 구성(construct) 할 수 있다. 애플리케이션의 initial state 와, 애플리케이션에 power 를 공급할 reducer 를 지정해 수행할 수 있다:

import ComposableArchitecture

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      FeatureView(
        store: Store(
          initialState: Feature.State(),
          reducer: Feature()
        )
      )
    }
  }
}

이걸로 화면에서 실행하기 충분하다.

순수 SwiftUI 방식으로 이 작업을 수행하는 경우보다 몇단계가 더 필요하지만, 몇가지 이점이 있다.

일부 observable object 와 UI component 의 다양한 action closure 에서 logic 을 분산시키는 대신 state 변경을 적용하는 일관된 방식(manner)을 제공한다.
side effect 를 간결하게 표현하는 방법을 제공한다.
추가 작업을 많이 하지 않고도, effect 를 포함하여 이 logic을 즉시 테스트할 수 있다.

Jinsujin / translate-documents