[SwiftUI] 상태관리(State Pullbacks)

 

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

 

 

 

📚 이번 강의 목표

이전에 작성했던 reducer 코드가 무거워보임 -> 하나의 큰 reducer를 한 가지 특정 작업을 수행하는 여러 개의 reducer로 쪼갠 다음 서로 연결해서 master reducer를 만들어보자

 

 

 

 

 

 

📚 코드

 

- 기존에 여러 가지 역할을 하는 함수가 정의되어 있는 reducer 코드

 

func appReducer(value: inout AppState, action: AppAction) -> Void {
  switch action {
  case .counter(.decrTapped):
    state.count -= 1

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

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

  case .primeModal(.removeFavoritePrimeTapped):
    state.favoritePrimes.removeAll(where: { $0 == state.count })
    state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(state.count)))

  case let .favoritePrimes(.deleteFavoritePrimes(indexSet)):
    for index in indexSet {
      let prime = state.favoritePrimes[index]
      state.favoritePrimes.remove(at: index)
      state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(prime)))
    }
  }
}

 

 

 

 

 

 

 

- 두 개의 reducer가 있을 때 하나의 reducer로 결합하는 방법

: 첫 번째 reducer를 실행한 뒤 두 번째 reducer 실행한다!

 

func combine<Value, Action>(
  _ first: @escaping (inout Value, Action) -> Void,
  _ second: @escaping (inout Value, Action) -> Void
) -> (inout Value, Action) -> Void {

  return { value, action in
    first(&value, action)
    second(&value, action)
  }
}

 

 

 

 

 

 

 

- 기존 코드를 여러 개의 reducer로 분해해보자

 

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

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

  default:
    break
  }
}

func primeModalReducer(state: inout AppState, action: AppAction) -> Void {
  switch action {
  case .primeModal(.addFavoritePrime):
    state.favoritePrimes.append(state.count)
    state.activityFeed.append(.init(timestamp: Date(), type: .addedFavoritePrime(state.count)))

  case .primeModal(.removeFavoritePrime):
    state.favoritePrimes.removeAll(where: { $0 == state.count })
    state.activityFeed.append(.init(timestamp: Date(), type: .removedFavoritePrime(state.count)))

  default:
    break
  }
}

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

  default:
    break
  }
}

 

 

 

 

 

 

 

 

 

let appReducer = combine(combine(counterReducer, primeModalReducer), favoritePrimesReducer)

 

app reducer를 아까 만든 combine 함수를 이용하여 새롭게 생성한다

현재 combine 함수는 여러 개를 실행할수록 계속해서 중첩해야 하기 때문에 복잡해진다.

따라서 여러 개의 개별 reducer를 받을 수 있는 함수로 새롭게 정의한다

 

func combine<Value, Action>(
  _ reducers: (inout Value, Action) -> Void...
) -> (inout Value, Action) -> Void {

  return { value, action in
    for reducer in reducers {
      reducer(&value, action)
    }
  }
}

 

위와 같이 함수를 변경하면 appReducer를 좀 더 간단하고 읽기 쉽게 정의할 수 있다.

 

let appReducer = combine(
  counterReducer,
  primeModalReducer,
  favoritePrimesReducer
)

 

 

 

 

 

 

 

기존 counterReducer 함수를 살펴보면 실제로 count의 값만 필요함에도 불구하고, 전체 appState를 매개로 받는다.

따라서 state: inout Int로 변경하여 필요한 값만 AppState에서 가져올 수 있도록 한다.

 

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

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

  default:
    break
  }
}

 

하지만 이와 같이 매개변수를 변경하는 경우 reducer가 같은 state를 가리키지 않기 때문에 에러가 발생한다.

counterReducer는 integer값만 필요로 하지만, 다른 reducer들은 전체 appState가 필요하다.

 

 

 

 

 ✨ 이러한 상황에서 사용하는 것이 pullback!

 

 

pullback은 작은 데이터에서 큰 데이터로 변환하는데 유리하다!

예를 들어 integer 값이 주어졌을 때 사용자 ID 필드 값에 투영하여 상요자 모델에 대한 술어가 되도록 다시 가져올 수 있다.

 

Local 상태의 reducer를 Global 상태의 reducer로 변환할 수 있는 함수를 만들어보자.

 

 

func pullback<LocalValue, GlobalValue, Action>(
  _ reducer: @escaping (inout LocalValue, Action) -> Void
) -> (inout GlobalValue, Action) -> Void {

}

 

 

요런 basic 함수에다가 LocalValue와 GlobalValue 제네릭을 연결하자

 

func pullback<LocalValue, GlobalValue, Action>(
  _ reducer: @escaping (inout LocalValue, Action) -> Void,
  get: @escaping (GlobalValue) -> LocalValue,
  set: @escaping (inout GlobalValue, LocalValue) -> Void
) -> (inout GlobalValue, Action) -> Void {

  return  { globalValue, action in
    var localValue = get(globalValue)
    reducer(&localValue, action)
    set(&globalValue, localValue)
  }
}

 

 

pullback(counterReducer, get: { $0.count }, set: { $0.count = $1 }),

 

pullback 함수를 통해 다음과 같이 호출할 수 있다.

 

 

 

 

 

get, set 인자를 WritableKeyPath를 통해 좀 더 간단하게 작성할 수 있다.

 

func pullback<LocalValue, GlobalValue, Action>(
  _ reducer: @escaping (inout LocalValue, Action) -> Void,
  value: WritableKeyPath<GlobalValue, LocalValue>
) -> (inout GlobalValue, Action) -> Void {
  return { globalValue, action in
    reducer(&globalValue[keyPath: value], action)
  }
}

 

 

key path를 사용하는 경우 다음과 같이 작성할 수 있다.

 

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

 

\.self는 AppState에서 AppState로 이동하는 핵심 경로이다.

 

 

 

 

 

 

 

이제 favoritePrimesReducer 함수를 pullback해보자!

 

// 원하는 데이터만 AppState에서 가져올 수 있도록 구조체 새로 선언
struct FavoritePrimesState {
  var favoritePrimes: [Int]
  var activityFeed: [AppState.Activity]
}


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

  default:
    break
  }

 

 

발생하는 에러를 해결하기 위해 AppState에 있는 favoritePrimesReducer를 수정해준다.

(필요한 상태 값이 단일 AppState가 아니라 두 개의 AppState에서 나오기 때문)

 

extension AppState {
  var favoritePrimesState: FavoritePrimesState {
    get {
      return FavoritePrimesState(
        favoritePrimes: self.favoritePrimes,
        activityFeed: self.activityFeed
      )
    }
    set {
      self.activityFeed = newValue.activityFeed
      self.favoritePrimes = newValue.favoritePrimes
    }
  }
}

 

 

 

 

 

 

 

appReducer값을 다음과 같이 변경해준다.

 

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

 

 

 

 

 

 

---

작업에 필요한 최소한의 state에서만 작동하도록 전체 reducer를 세부화하고, 전체 reducer에 가져올 수 있도록 코드를 수정해봤다.