SwiftUI - TCA Store와 ViewStore

안녕하세요 !

이번에는 Store와 ViewStore라는 주제로 포스팅 해보려해요~!

TCA에서 Store와 ViewStore는 핵심적인 개념인데요 !

이 두 가지 요소의 역할과 사용 방법에 대해 자세히 알아보도록 해요

Store는 앱의 상태를 관리하고 비즈니스 로직을 처리하는 중심 컴포넌트이며,

ViewStore는 SwiftUI 뷰와 Store 사이의 중개자 역할을 담당합니다

이정도로만 아시고 이제 예제 코드를 보면서 알아보도록 할게욯ㅎㅎ

Store: 앱의 상태와 로직의 중심

Store는 앱의 전체 상태를 관리하고 모든 비즈니스 로직을 담당합니다

import ComposableArchitecture

struct AppFeature: Reducer {
  struct State {
    var count = 0
  }
  
  enum Action {
    case incrementTapped
    case decrementTapped
  }
  
  func reduce(into state: inout State, action: Action) -> Effect<Action> {
    switch action {
    case .incrementTapped:
      state.count += 1
      return .none
    case .decrementTapped:
      state.count -= 1
      return .none
    }
  }
}

// Store 생성
let store = Store(initialState: AppFeature.State()) {
  AppFeature()
}

Store는 이 AppFeature를 기반으로 생성되며, 앱의 전체 상태를 관리합니다.

Store는 직접적으로 SwiftUI 뷰에서 사용되지 않고 ViewStore를 통해 뷰와 상호작용합니다.

ViewStore: 뷰와 Store의 중개자

ViewStore는 SwiftUI 뷰와 Store 사이의 중개자 역할을 담당합니다

import SwiftUI
import ComposableArchitecture

struct ContentView: View {
  let store: StoreOf<AppFeature>
  
  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      VStack {
        Text("Count: \(viewStore.count)")
        HStack {
          Button("Increment") {
            viewStore.send(.incrementTapped)
          }
          Button("Decrement") {
            viewStore.send(.decrementTapped)
          }
        }
      }
    }
  }
}

WithViewStore는 Store를 ViewStore로 변환하여 뷰 내에서 사용할 수 있게 해요

ViewStore를 통해 우리는 상태를 읽고(viewStore.count) 액션을 디스패치(viewStore.send(.incrementTapped))할 수 있습니다.

(observe: { $0 }는 전체 상태를 관찰한다는 의미입니다.)

Store와 ViewStore의 관계

Store와 ViewStore의 관계를 이해하는 것은 중요합니다:
Store는 앱의 전체 상태와 로직을 관리하고
ViewStore는 특정 뷰에 필요한 상태만을 제공하고,뷰에서 발생한 사용자 상호작용을 Store에 전달합니다

정리하자면 ViewStore는 Stor에게 사용자 요청을 보내주고 Store가 비즈니스 로직을(네트워크 통신 및 상태 변경) 처리 한 후 VieStore에게 다시 전달해주는 구조 입니다

이상으로 포스팅 마무리 하겠습니다.

.
.
.

감사합니다.