[SwiftUI/TCA] Store and ViewStore

출처 및 참고 사이트

https://axiomatic-fuschia-666.notion.site/Chapter-3-TCA-2-c56b24efb2154dad9ed8e54139247024

Chapter 3. TCA의 기본개념(2)

What is Store

• 런 타임동안 Reducer의 인스턴스를 관리하는 참조 타입 객체
• 앱의 State, Action을 관리
  • State의 변화 감지
  • 액션 처리

let store: Store<ProductDetailFeature.State, ProductDetailFeature.Action>

public typealias StoreOf<R: Reducer> = Store<R.State, R.Action>
let store: StoreOf<ProductDetailFeature>

typealias 축약 표현

 

ViewStore가 나타나게 된 배경

• Store: 앱의 상태 변화 관리
• ViewStore: View에 필요한 상태만 구독하고 업데이트
• View에 필요하지 않은 상태의 변경으로 인한 불필요한 View 업데이트를 방지
• MultiStore
  • 상위 View의 Store는 하위 View에 필요로 하는 상태 일부를 소유하고 있고, 하위 View에 이 일부를 소유하는 별도의 스토어를 연결하게 함
  • 자식 View에서 액션을 받으면 이를 부모 스토어에 전달
  • 액션을 받은 부모 스토어는 자체 리듀서 호출 -> 내부 상태 업데이트
  • 액션이 이루어지는 동안 부모 뷰의 상위 뷰에서 View 렌더링 요청이 오면 액션으로 인한 렌더링 뿐만 아니라 상위 뷰의 렌더링 요청에 의해 여러번 렌더링 하는 상황이 발생 됨
  • but ViewStore는 변화의 중복을 방지하는 기능을 탑재 -> View의 모든 상태를 관찰 x, 일부분의 변화로 View는 그 변화를 감지할 수 있음

  public init<State>(
    _ store: Store<State, ViewAction>,
    observe toViewState: @escaping (_ state: State) -> ViewState,
    removeDuplicates isDuplicate: @escaping (_ lhs: ViewState, _ rhs: ViewState) -> Bool
  ) {
    self._send = { store.send($0, originatingFrom: nil) }
    self._state = CurrentValueRelay(toViewState(store.stateSubject.value))
    self._isInvalidated = store._isInvalidated
    #if DEBUG
      self.storeTypeName = ComposableArchitecture.storeTypeName(of: store)
      Logger.shared.log("View\(self.storeTypeName).init")
    #endif
    self.viewCancellable = store.stateSubject
      .map(toViewState)
      .removeDuplicates(by: isDuplicate)
      .sink { [weak objectWillChange = self.objectWillChange, weak _state = self._state] in
        guard let objectWillChange = objectWillChange, let _state = _state else { return }
        objectWillChange.send()
        _state.value = $0
      }
  }

• 위 코드에서 @escaping (_ state: State) -> ViewState 에서 View에 필요한 변화를 관찰하기 위해 View에 필요한 State struct를 구성
• 원본 State를 관찰할 상태로 구성한 ViewState로 변환
• ViewState의 변화가 감지되면 SwiftUI View에게 상태 변화를 알림
• isDuplicate로 변화의 중복을 없앤 뒤 내부의 State값을 갱신

WithViewStore

• Reducer 구성 후 WithViewStore로 Store와 View 연결

    let store: StoreOf<ProductDetailFeature>
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            // 기존 방식
      	}
    }

• 기존 방식은 타입을 명시해서 컴파일러의 연산을 줄일 수 있음

    let store: StoreOf<ProductDetailFeature>
    @ObservedObject var viewStore: ViewStoreOf<ProductDetailFeature>
    
    init(store: StoreOf<ProductDetailFeature>) {
        self.store = store
        self.viewStore = ViewStore(self.store, observe: { $0 })
    }

• 이니셜라이저로 Store을 주입받음
• 이니셜라이저 내부에서 ViewStore을 생성
• View 계층 구조에 적어 주었던 WithViewStore ~ 을 줄일 수 있어 기존 보다 View 계층을 줄일 수 있음

@dynamicMemberLookup
public final class ViewStore<ViewState, ViewAction>: ObservableObject { /* ... */ }

 

N.B. `ViewStore` does not use a `@Published` property, so `objectWillChange`   won't be synthesized automatically. To work around issues on iOS 13 we explicitly declare it.

Scope

  public func scope<ChildState, ChildAction>(
    state toChildState: @escaping (_ state: State) -> ChildState,
    action fromChildAction: @escaping (_ childAction: ChildAction) -> Action
  ) -> Store<ChildState, ChildAction> {
    self.scope(state: toChildState, action: fromChildAction, removeDuplicates: nil)
  }

• Store의 scope 메서드를 이용해 하위 State 및 Action을 다루는 스토어로 변환
• Store을 작은 범위의 Store로 나눌 수 있음
  
  • 해당 도메인의 상태와 액션을 추출한 작은 범위의 Store을 반환
  • 각 View의 필요한 상태와 액션을 정의하고 접근할 수 있음
  • 모듈화와 유연성
  • 유닛 테스트 용이
• state: 상태를 추출할 KeyPath로서 상위 뷰의 state를 추출 (WritableKeyPath)
• action: 액션을 추출하기 위한 KeyPath (CasePath)

AmountControlView(
    store: self.store.scope(state: \.amountControl, action:
ProductDetailFeature.Action.amountControl)
)

• self.store는 상위 뷰인 ProductDetailFeature의 Store

Scope 더 알아보기

2023.11.30 - [Architecture] - [SwiftUI/TCA] Scope

 

 

Pexels에서 Pixabay님의 사진: https://www.pexels.com/ko-kr/photo/327482/