[SwiftUI/TCA] Scope

Scope란?

이전 표현 방식

struct Scope<ParentState, ParentAction, Child> where Child : ReducerProtocol

현재 표현 방식

struct Scope<ParentState, ParentAction, Child: Reducer>: Reducer

• parent domain을 child domain으로 변경 -> 하위 도메인에서 child reduce를 실행 시킴
• 큰 규모의 feature을 작은 단위로 쪼개거나 합칠 수 있음
• 작은 단위의 feature는 큰 규모의 feature 보다 이해하기 쉬우며 test 및 모듈화된 방식으로 관리할 수 있음

 

Scope 생성

  @inlinable
  public init<ChildState, ChildAction>(
    state toChildState: WritableKeyPath<ParentState, ChildState>,
    action toChildAction: AnyCasePath<ParentAction, ChildAction>,
    @ReducerBuilder<ChildState, ChildAction> child: () -> Child
  ) where ChildState == Child.State, ChildAction == Child.Action {
    self.init(
      toChildState: .keyPath(toChildState),
      toChildAction: toChildAction,
      child: child()
    )
  }

• state
  • parent state 내부에 정의된 child state를 식별하기 위한 writable key path
• action
  • parent action 내부에 정의된 child action을 식별하기 위한 case path
• @ReducerBuilder
  • child domain에서 실행되기 원하는 reducer를 넘겨준다

Scope(state: \.amountControl, action: /Action.amountControl) {
    AmountControl()
        ._printChanges()
}

• 상위 도메인은 자식 도메인에서 실행되어야 하는 action을 가로채서 자식 reducer에게 공급 -> 부모 State 업데이트, effects 실행

 

Scope가 하는 일

• 애플리케이션 상태와 액션을 관리 가능하고 모듈화된 방식으로 나누어 다룰 수 있게 함
• State Scoping
  • State 중 일부를 child view에서 사용할 수 있게 함
  • child view는 필요한 상태만 다룰 수 있게 됨
  • 코드 복잡성 줄어들고(스읍) 모듈화, 상태 변경 쉽게 추적 가능
• Action Scoping
  • child view에서 발생하는 액션을 상위 뷰의 액션으로 변환
  • child view는 자체적인 액션을 정의할 수 있음
  • child view 액션은 상위 액션으로 변환되어 상호작용

 

* 예시 코드에서 ProductDetail~ 은 상위, AmountControl~은 하위

Child Reducer 생성

struct AmountControl: Reducer {
    struct State: Equatable {
        var amount: Int = 0
    }
    
    enum Action: Equatable {
        case minusButtonTapped
        case plusButtonTapped
    }
    
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .minusButtonTapped:
                state.amount -= 1
                return .none
            case .plusButtonTapped:
                state.amount += 1
                return .none
            }
        }
    }
}

 

• Child View인 AmountControlView에서 사용될 Reducer 을 생성
• 하위 뷰에서 사용할 State와 Action 정의

Parent Domain에 Child Domain 정의

struct ProductDetailFeature: Reducer {
    struct State: Equatable {
        var amountControl = AmountControl.State()
    }
    
    enum Action: Equatable {
        case amountControl(AmountControl.Action)
    }

• 자식 State를 부모 State에, 자식 Action을 부모 Action에 포함 시킴

    var body: some ReducerOf<Self> {
        Scope(state: \.amountControl, action: /Action.amountControl) {
            AmountControl()
                ._printChanges()
        }
        // ... 생략

• Parent reducer은 child domain을 포함 시켜 child reducer를 임베디드 시킴
• body 내부의 순서는 Child Reducer 작성 후 Parent Reducer (부모 뷰에서 모두 처리한 뒤 자식 뷰에 이벤트를 전달하지 않을 수 있기 때문에)

Enum state

• Scope reducer 또한 struct가 아닌 enum

            case .amountControl(let childAction):
                // 자식 State의 값의 변화 뿐만 아니라 치환도 가능
                switch childAction {
                case .minusButtonTapped:
                    state.productAmount -= 1
                    return .none
                case .plusButtonTapped:
                    state.productAmount += 1
                    return .none
                }
            }

• parent의 action인 amountControl 내에서 child action을 enum으로 구조화 할 수 있음

Child View init

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

• store 전달 시 Parent View의 store의 scope 메서드로 전달

struct AmountControlView: View {
    let store: StoreOf<AmountControl>
    
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
// 생략

참고 사이트

https://pointfreeco.github.io/swift-composable-architecture/0.54.0/documentation/composablearchitecture/scope/

Documentation

 

Pixabay 로부터 입수된  PublicDomainPictures 님의 이미지