[SwiftUI/TCA] Effect 구현과 활용

출처 및 참고 사이트 

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

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

 

Effect란?

Action이 반환하는 타입을 뜻하며 Action을 거친 모든 결과물을 의미한다. 비동기 작업이나 외부 작용에 의해 발생하는 Side Effect는 어떤 처리 이후 예상치 못하게 얻은 결과물을 의미한다. Store는 Side Effect를 앱의 로직에 통합하는 역활을 한다. 

public struct Reduce<State, Action>: Reducer {
  @usableFromInline
  let reduce: (inout State, Action) -> Effect<Action>
  // ...
}

public typealias ReducerOf<R: Reducer> = Reducer<R.State, R.Action>

• Action은 State를 직접 변경하지만, Effect는 비동기적인 작업을 수행하고 결과를 Action으로 반환 한뒤 State에 반영함
• 특정 Action 실행 > 결과에 따라 새로운 Action 생성(직접 상태를 변경하는 것이 아님) > State 업데이트
• ex ) 네트워크 호출, 데이터 로딩, 외부 서비스와 교류 등의 다양한 비동기 작업

Effect가 하는 일

• 비동기 작업
  • 네트워크 요청, 데이터 로딩, 파일 다운로드 등
• Side Effect 분리
  • State 변화를 일으키는 부분과 Side Effect 다루는 부분을 명확하게 분리할 수 있음
  • 코드 가독성 향상
  • 테스트와 디버깅 용이
• 취소 및 에러 핸들링
  • 비동기 작업 성공, 실패, 중단 관리
  • ex) 네트워크 요청 중 발생한 오류 대응
• 순서 보장
  • TCA에서의 Effect는 순차적으로 실행
  • 순서를 보장함
  • 예측 가능한 결과를 얻을 수 있음

Side Effect 

• 앱의 주요 로직과 별개로 발생하는 작업
• 외부 서비스와의 상호작용 또는 비동기 작업 처리
• 사이드 이펙트는 코드 복잡성이 증가시키고 테스트 하기 어렵게 함
• 에러가 발생하면 적절한 Action을 생성하여 State를 업데이트 하여 사용자에게 피드백 제공

            case .getProductDetail:
                return .run { [id = state.productId] send in
                    let (data, _) = try await URLSession.shared.data(from: URL(string: "https://api/v1/products/\(id)")!)
                    do {
                        let product = try JSONDecoder().decode(Product.self, from: data)
                        print(product)
                        await send(.productResponse(product))
                    } catch {
                        await send(.alertShow)
                    }
                }

ㄴ 에러 발생시 얼럿을 보여주는 Action을 생성하여 State 업데이트

 

      case .onTask:
        return .run { send in
          let status = await withUnsafeContinuation { continuation in
            SFSpeechRecognizer.requestAuthorization { status in
              continuation.resume(with: .success(status))
            }
          }
          for await _ in self.clock.timer(interval: .seconds(1)) {
            await send(.timerTicked)
          }
        }

• View가 화면에 나타나면 권한을 요청하는 코드
• Apple API에 접근 -> 사용자의 결정 -> 시스템에 피드백 -> 사이드 이펙트 : View가 시작하자 마자 Side Effect가 발생
• .run 메서드는 해당 클로저에 Action을 시스템으로 다시 보낼 수 있는 .send로 비동기 작업을 수행

.task { await viewStore.send(.onTask).finish() }

• View가 화면에 나타나면 비동기 작업 실행, View가 사라지면 비동기 작업 자동 취소
• .task()와 .send(_:Action) 메서드로 Effect의 작업을 View의 Lifecycle과 연결
• Action 전달 후 모든 Effect가 완료되는 .finish를 기다림

func withUnsafeContinuation<T>(_ fn: (UnsafeContinuation<T, Never>) -> Void) async -> T

• 전달된 클로져는 동기적으로 실행되며 클로저가 반환되면 작업이 일시 중단됨
• 작업을 즉시 재개하거나 나중에 완료를 위해 continuation에서 빠져나올 수 있음
• resume 메서드는 한 번만 호출해야 하며 이 메서드를 호출하지 않으면 작업이 무기한 일시 중단된 상태로 유지됨
• reusme을 두번 호출하거나 호출하는 것을 잊어 버리지 말아야 함

 

continuation: UnsafeContinuation<SFSpeechRecognizerAuthorizationStatus, Never>

• requestAuthorization의 콜백을 confinuation을 이용해 비동기 함수로 연결
• 사용자가 권한을 설정하면 일시 중단 종료

 

Effect의 종류

public struct Effect<Action> {
  @usableFromInline
  enum Operation {
    case none
    case publisher(AnyPublisher<Action, Never>)
    case run(TaskPriority? = nil, @Sendable (_ send: Send<Action>) async -> Void)
  }
  // ...
}

Effect에는 none, publisher, run 타입이 존재

  @inlinable
  public init(_ reduce: @escaping (_ state: inout State, _ action: Action) -> Effect<Action>) {
    self.init(internal: reduce)
  }

Reducer을 따르는 Reduce의 reduce로 전달된 클로저는 Effect를 반환

.none

Effect를 반환해야 하나 아무런 effect도 반환하고 싶지 않을 때 사용됨

case .likeButtonTapped:
    state.isLike.toggle()
    return .none

 

.send

  public static func send(_ action: Action) -> Self {
    Self(operation: .publisher(Just(action).eraseToAnyPublisher()))
  }

• Effect의 익스텐션에 구현된 send는 Action을 파라미터로 받는 메서드
• 액션 이후 추가적인 '동기' 액션이 필요할 때 사용됨
• 액션 전달 및 애니메이션을 동시에 처리 가능
• 단방향 데이터 흐름을 헤칠 수 있으므로 로직 공유 목적으로 사용되서는 안됨
• ex 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

.run

• 비동기 작업 수행

static func run(
    priority: TaskPriority? = nil,
    operation: @escaping (Send<ProductDetailFeature.Action>) async throws -> Void,
    catch handler: ((Error, Send<ProductDetailFeature.Action>) async -> Void)? = nil,
    fileID: StaticString = #fileID,
    line: UInt = #line
) -> Effect<ProductDetailFeature.Action>

• operation 파라미터로 비동기 클로저를 전달받아 실행함

                return .run { [id = state.productId] send in
                    let (data, _) = try await URLSession.shared.data(from: URL(string: "")!)
                    do {
                        let product = try JSONDecoder().decode(Product.self, from: data)
                        print(product)
                        await send(.productResponse(product))
                    } catch {
                        // TODO: error handling
                    }
                }

• 클로저 내부에서 send로 액션을 전달 할 수 있음

.cancellable, .cancel

• effect를 취소할 수 있게 만드는 메서드

func cancellable<ID>(
    id: ID,
    cancelInFlight: Bool = false
) -> Effect<ProductDetailFeature.Action> where ID : Hashable

• effect를 식별하기 위한 값
• cancelInFlight 값을 false로 설정하면 같은 id를 지정하여 effect를 취소할 수 있음. 기본 값은 false

public func cancellable<ID: Hashable>(id: ID, cancelInFlight: Bool = false) -> Self {

• ID로는 hash 가능한 어떤 값으로든 지정 가능

    private enum CancelID {
        case timer
    }

• enum으로 CancelID 지정

            case .timerToggled:
                state.isTimerOn.toggle()
                if state.isTimerOn {
                    return .run { send in
                        for await _ in self.clock.timer(interval: .seconds(1)) {
                            await send(.timerTicked)
                        }
                    }
                    .cancellable(id: CancelID.timer)
                } else {
                    return .cancel(id: CancelID.timer)
                }

• 타이머가 실행 되면 .run 실행 -> 1초 마다 timerTicked 액션 실행 됨 -> 타이머 멈춤 -> .cancel 호출 -> CancelID timer 로 등록된 이벤트 취소(이때 이벤트는 state.isTimerOn 일 때 실행되는 .run)
• 정리 ) effect에 .cancellable로 cancelID 등록, 취소가 필요한 타이밍에 .cancel로 effect 취소

.merge

case .addCartButtonTappedAndAlertShow:
    return .merge(
        .send(.addCartButtonTapped),
        .send(.alertShow)
    )
}

• 여러 Effect를 동시에 실행
• 순서가 보장되지 않음
• 관련 없는 각각의 Effect를 실행시키고 그에 따른 각각의 State를 변화 시킬 때 사용

.concatenate

case .addCartButtonTappedAndAlertShow:
    return .concatenate(
        .send(.addCartButtonTapped),
        .send(.alertShow)
    )
}

• 여러 Effect를 동시에 실행
• 순서가 보장됨

 

https://www.pexels.com/ko-kr/photo/256150/