The Composable Architecture

[JD-man]

What is the Composable Architecture?

• State Management
  • value 타입을 사용해서 상태를 관리하고 한 화면의 상태를 다른 화면에 공유할 수 있다.
• Composition
  • 큰 피쳐를 작은 컴포넌트들로 나눌 수 있으며 모듈로 만들고 다시 합치기 용이하다.
• Side effects
  • 앱의 특정 파트는 테스트할 수 있으며 외부와 통신이 가능하다.
• Testing
  • 아키텍쳐에 있는 피쳐뿐만 아니라 많은 파트를 구성하고 있는 피쳐들에 대한 테스트도 작성할 수 있다.
• Ergonomics
  • 위의 API들을 간단하게 사용할 수 있음

Learn More

• Point-Free Episodes
• 여기서 TCA에 대한 영상을 볼 수 있음

Examples

• TCA Example Github
• 여기서 TCA에 대한 예제를 볼 수 있음

[JD-man]

Basic Usage

State

• 피쳐가 수행하는 로직과 UI 렌더링할 데이터

  Action

• 피쳐 내에서 수행되는 액션

  Environment

• API, Analytics 등과 같은 피쳐가 필요한 dependency

  Reducer

• 주어진 Action에 대해서 State를 어떻게 변화시킬지에 대한 함수

• Effect를 반환하는 API Request와 같은 effect가 일어난다.

  Store

• 모든 Action들은 Store로 보내지고 Store는 Reducer와 Effect를 돌린다.

• 이렇게 State를 업데이트 시키고 Observing하며 UI에 반영한다

• 이딴짓을 하는 이유는 테스트가 용이해지고 크고 복잡한 피쳐를 작은 도메인으로 나눌 수 있다는 장점이 있어서다.

Action 보내기

Button("−") { viewStore.send(.decrementButtonTapped)

State Bind

.alert(
        item: viewStore.binding(
          get: { $0.numberFactAlert.map(FactAlert.init(title:)) },
          send: .factAlertDismissed
        ),

Reducer

• 특이한점은 Reducer에서도 Side Effect가 있으며 그 액션을 다시 받고있다.

  
  let appReducer = Reducer<AppState, AppAction, AppEnvironment> { state, action, environment in
  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 {
    await .numberFactResponse(TaskResult { try await environment.numberFact(state.count) })
  }
  
  case let .numberFactResponse(.success(fact)):
  state.numberFactAlert = fact
  return .none
  
  case .numberFactResponse(.failure):
  state.numberFactAlert = "Could not load a number fact :("
  return .none
  }
  }