[SwiftUI] 상태관리(Action Pullbacks)

 

PointFree 강의 Composable Architecture
Composable State Management: Action Pullbacks 정리

 

 

 

📚 이번 강의 목표

AppAction을 개별 Action으로 분리해보자

 

 

 

📚 코드

 

 

- 기존 코드의 문제점

 

func counterReducer(state: inout Int, action: AppAction) -> Void {
  switch action {
  case .counter(.decrTapped):
    state -= 1

  case .counter(.incrTapped):
    state += 1

  default:
    break
  }
}

 

counterReducer 함수를 보면 reducer가 정수에서만 작동한다.

 

하지만 전체 AppAction을 받고 있기 때문에

CounterAction 열거형에 새로운 액션을 추가하면 컴파일러 오류가 발생하지 않고

reducer에서 해당 액션이 자동으로 무시(default)되는 문제점이 발생한다. 

 

 

 

 

 

func counterReducer(state: inout Int, action: CounterAction) -> Void {
  switch action {
  case .decrTapped:
    state -= 1

  case .incrTapped:
    state += 1
  }
}

 

따라서 코드를 다음과 같이 수정하면 더이상 default 값을 설정하지 않아도 된다. 그리고 모듈로 추출이 가능해진다.

 

 

 

 

 

let appReducer = combine(
  pullback(counterReducer, value: \.count),
  primeModalReducer,
  pullback(favoritePrimesReducer, value: \.favoritePrimesState)
)

 

🛑 Type of expression is ambiguous without more context

 

코드를 수정하면 다음과 같은 에러가 발생하는데, 그 이유는 counterReducer가 state에 관해서는 다른 reducer와 동일한 언어를 사용하지만, action에 관해서는 동일한 언어를 사용하지 않기 때문이다.

 

counterReducer는 counterAction만 이해할 수 있고, AppAction의 전체 액션은 이해할 수 없으므로, 더 이상 reducer를 함께 결합할 수 없다. 따라서 localAction만 이해하는 reducer를 Global Action을 이해하는 reducer로 변환하는 작업이 필요하다.

 

 

 

Local 상태에서 작동하는 reducer를 Global 상태에서 작동하는 reducer로 변환하고자 했을 때, Global 상태에서 Local 상태로 내려가는 핵심 경로를 따라서 pullback하는 것이 해결책임을 알 수 있었다. action에서는 어떤 식으로 구현할 수 있을까?

 

액션은 enum타입으로 정의되어 있고, 이러한 열거형에는 키 경로라는 개념이 없다. 하지만 key path의 본질을 구현해보면 다음과 같다.

 

struct _KeyPath<Root, Value> {
  let get: (Root) -> Value
  let set: (inout Root, Value) -> Void
}

 

key path의 핵심은 root에서 값을 get하는 수단을 제공하고, root 내부의 값을 set해서 변경된 새로운 root를 제공하는 것이다.

이 두 가지 연산은 기본적으로 구조체에서 수행할 수 있는 일반적인 연산이다.

 

열거형에도 비슷한 연산이 존재한다.

 

AppAction.counter(CounterAction.incrTapped)

 

이 것은 setter 연산과 비슷하게 작동하며, 값을 가져와서 AppAction 열거형 안에 삽입하는 것이다.

다음은 getter와 비슷한 연산으로 열거형 값을 가져와서 특정 케이스에서 값을 추출할 수 있다.

 

let action = AppAction.favoritePrimes(.deleteFavoritePrimes([1]))
let favoritePrimesAction: FavoritePrimesAction?
switch action {
case let .favoritePrimes(action):
  favoritePrimesAction = action
default:
  favoritePrimesAction = nil
}

 

 

 

만약 Swift에서 열거형 key path를 지원했다면 다음과 같이 구현할 수 있었을 것이다.

 

let action = AppAction.favoritePrimes(.deleteFavoritePrimes([1]))
let favoritePrimesAction: FavoritePrimesAction?
switch action {
case let .favoritePrimes(action):
  favoritePrimesAction = action
default:
  favoritePrimesAction = nil
}

 

 

 

 

---

열거형 프로퍼티

 

구조체(struct)는 . 구문을 통해 매우 간단한 데이터 액세스가 가능하다. 열거형(enum)은 이러한 어포던스가 없다.

또한 구조체의 모든 프로퍼티는 컴파일러에서 생성된 key path를 가지며, 이는 getter/setter역할을 수행한다. 하지만 열거형은 없다.

 

이러한 문제를 열거형 프로퍼티를 사용하여 해결하고자 한다.

 

 

enum AppAction {
    case counter(CounterAction)
    case primeModal(PrimeModalAction)
    case favoritePrimes(FavoritePrimesAction)
    
    // enum properties
    // 프로퍼티를 사용하는 경우 AppAction 열거형에 있는 모든 케이스의 관련 데이터에 대한 인스턴스 액세스 가능
    var counter: CounterAction? {
        get {
            guard case let .counter(value) = self else { return nil }
            return value
        }
        set {
            guard case .counter = self, let newValue = newValue else { return }
            self = .counter(newValue)
          }
    }
    var primeModal: PrimeModalAction? {
        get {
            guard case let .primeModal(value) = self else { return nil }
            return value
        }
        set {
            guard case .primeModal = self, let newValue = newValue else { return }
            self = .primeModal(newValue)
        }
    }
    var favoritePrimes: FavoritePrimesAction? {
        get {
            guard case let .favoritePrimes(value) = self else { return nil }
            return value
        }
        set {
            guard case .favoritePrimes = self, let newValue = newValue else { return }
            self = .favoritePrimes(newValue)
        }
    }
}

 

열거형 프로퍼티를 사용하면 AppAction 열거형에 있는 모든 case의 관련 데이터에 대한 인스턴스 액세스를 할 수 있다.

이러한 열거형 속성은 유용하지만 유지/관리하기 번거롭기 때문에 SwiftSyntax 라이브러리를 통해 관리할 수 있다.

 

 

 

이렇게 구현하면 구조체처럼 쉽게 작동한다.

예를 들면 다음과 같이 열거형 값에 쉽게 접근할 수 있다.

 

let someAction = AppAction.counter(.incrementTapped)
someAction.counter  // Optional(incrememtTapped)
someAction.favoritePrimes   // nil

// 각 열거형 케이스에 대한 key path를 얻을 수 있다
\AppAction.counter  // WritableKeyPath<AppAction, CounterAction?>

 

 

 

 

 

---

Pulling back reducers along actions

 

Local 액션에서 작동하는 방법을 알고 있는 reducer를 Global 액션에서 작동하는 방법을 알고 있는 reducer로 pullback하기를 원한다.기본적인 함수의 틀은 다음과 같다.

 

func pullback<Value, GlobalAction, LocalAction>(
  _ reducer: @escaping (inout Value, LocalAction) -> Void,
  ???
) -> (inout Value, GlobalAction) -> Void {

  ???
}

 

 

 

우리가 원하는 것은 optional local 액션에 대한 key path이다.

 

func pullback<Value, GlobalAction, LocalAction>(
  _ reducer: @escaping (inout Value, LocalAction) -> Void,
  action: WritableKeyPath<GlobalAction, LocalAction?>
) -> (inout Value, GlobalAction) -> Void {

  ???
}

 

 

 

 

Global 액션이 들어올 때 key path를 사용하여 Local 액션을 추출하려고 시도한다. 성공하면 reducer로 전달할 수 있고, 실패하면 아무 작업도 하지 않고 해당 액션을 조용히 처리할 수 있다.

func pullback<GlobalValue, LocalValue, GlobalAction, LocalAction>(
  _ reducer: @escaping (inout LocalValue, LocalAction) -> Void,
  value: WritableKeyPath<GlobalValue, LocalValue>,
  action: WritableKeyPath<GlobalAction, LocalAction?>
) -> (inout GlobalValue, GlobalAction) -> Void {

  return { globalValue, globalAction in
    guard let localAction = globalAction[keyPath: action] else { return }
    reducer(&globalValue[keyPath: value], localAction)
  }
}

 

 

 

 

이제 AppAction을 개별 CounterAction으로 투영하는 Key path를 통해서 counter reducer를 pullback할 수 있다

 

let _appReducer = combine(
  pullback(counterReducer, value: \.count, action: \.counter),
  primeModalReducer,
  pullback(favoritePrimesReducer, value: \.favoritePrimesState, action: \.self)
)
let appReducer = pullback(_appReducer, value: \.self, action: \.self)

 

 

 

 

 

pullback(favoritePrimesReducer, value: \.favoritePrimesState, action: \.self)

 

favoritePrimesReducer, primeModalReducer의 경우 ID key path에 따라 action을 다시 가져오고 있는데,

이는 어젼히 전체 AppAction 에서 작동하고 있다는 의미이다.

 

 

 

 

func favoritePrimesReducer(state: inout FavoritePrimesState, action: FavoritePrimesAction) -> Void {
  switch action {
  case let .deleteFavoritePrimes(indexSet):
    for index in indexSet {
      state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(state.favoritePrimes[index])))
      state.favoritePrimes.remove(at: index)
    }
  }
}



func primeModalReducer(state: inout AppState, action: PrimeModalAction) -> Void {
  switch action {
  case .removeFavoritePrimeTapped:
    state.favoritePrimes.removeAll(where: { $0 == state.count })
    state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(state.count)))

  case .saveFavoritePrimeTapped:
    state.favoritePrimes.append(state.count)
    state.activityFeed.append(.init(timestamp: Date(), type: .addedFavoritePrime(state.count)))
  }
}

 

먼저 reducer 함수를 다음과 같이 수정한다.

 

 

 

 

let _appReducer = combine(
  pullback(counterReducer, value: \.count, action: \.counter),
  pullback(primeModalReducer, value: \.self, action: \.primeModal),
  pullback(favoritePrimesReducer, value: \.favoritePrimesState, action: \.favoritePrimes)
)

 

다음으로 pullback을 업데이트해준다.

 

 

 

 

 

🛑 Generic parameter ‘Action’ could not be inferred

 

코드를 수정하면 다음과 같은 에러가 발생하는데, 그 이유는 reducer를 AppAction에서 완전히 분리했기 때문에 더이상 추론할 수 없기 때문이다. 컴파일러는 어떤 종류의 Global Action으로 되돌아가는지 알 수 없다.

 

let _appReducer: (inout AppState, AppAction) -> Void = combine(
  pullback(counterReducer, value: \.count, action: \.counter),
  pullback(primeModalReducer, value: \.self, action: \.primeModal),
  pullback(favoritePrimesReducer, value: \.favoritePrimesState, action: \.favoritePrimes)
)

 

다음과 같이 코드를 수정해서 해결하자.

 

 

 

 

 

 

 

---

끝!

 

전역 state와 전역 action에 대해 작동하던 거대한 reducer를 작은 상태에서만 작동하는 3개의 reducer로 리팩토링했다. 다음으로 이러한 작은 reducer들을 가져와 결합하여 큰 AppReducer를 만들 수 있었다.