TCA Toast

State, Action, Reducer를 이용하여 TCA를 어느정도 사용할 줄은 알지만

Effect 처리 하는 방법에 대해 공부가 필요하다.

case .nameButtonTapped:
  state.name = "hello Mr.L"
  return .none

일반적으로 View에서 Action을 호출해서 State을 변경시키고 종료시키는 것이 많긴하지만,

만약 Timer나 API 호출이 필요하다면 return .none 으로 끝나서는 안된다.

오늘 예제에서는 Toast Message를 3초간 띄워주고 없애는 것을 해보려고 한다.

View에 아래와 같이 Button과 Toast로 띄워줄 Text를 만들어보자

Text는 isShowToast가 true일 때 보여줄 예정이다.

Button("Toast 보이기") {
    viewStore.send(.showToast)
}
if viewStore.isShowToast {
    Text("Toast를 3초간 보여줍니다.")
}

그 다음으로 Store에서는 State, Action, Reducer 내용들을 작성해보자.

Reducer case .showToast: 에서 보면 .runEffect를 쓰고있다.

.run Effect는 클로저를 두고 그 안에서 Timer, API 호출 등을 할 수 있다.

struct State: Equatable {
    var isShowToast: Bool = false
}

enum Action: Equatable {
    case showToast
    case hideToast
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
            case .showToast:
                state.isShowToast = true
                return .run { send in
                    try await Task.sleep(for: .seconds(3))
                    await send(.hideToast)
                }
                .cancellable(id: "toast")
            case .hideToast:
                state.isShowToast = false
                return .cancel(id: "toast")
            
        }
    }
}

오늘은 Toast Message를 3초 띄워주고 없애는 기능을 만들기로 했으니,

Task.sleep(for: .seconds(3))를 써주고, 3초가 지나면 Toast를 hide 시켜주기로 한다.

그러기 위해서는 시스템에 다음 action을 send(.hideToast)형식으로 보내줘야 한다.

그럼 action 중, .hideToast 에 들어가서 State isShowToast를 변경시켜주고,

.cancel effect를 사용하여 ‘case .showToast:’의 .cancellable(id: "toast") 를 동작시켜준다.

.cancel effect는 Effect를 취소시켜주는 것으로, TCA의 강력한 기능이라고 소개되었다.

완성된 기능은 다음과 같이 보여진다.

Uploaded by N2T