[SwiftUI] 상태관리(redux)

 

 

 

 

 

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

 

 

 

📚 이번 강의 목표

 

저번 게시글에서 작성한 코드에서 

 

1. Combine으로부터 분리
2. 값 타입의 이점 활용

 

을 위해 상태 변화를 감지하는 객체를 만들고자 한다!

 

 

 

 

 

📚 코드

 

struct AppState {
    var count = 0
    var favoritePrimes: [Int] = []
    var loggedInUser: User?
    var activityFeed: [Activity] = []
    
    var didChange = PassthroughSubject<Void, Never>()
    
    struct Activity {
        let timestamp: Date
        let type: ActivityType
        
        enum ActivityType {
            case addedFavoritePrime(Int)
            case removedFavoritePrime(Int)
        }
    }
    
    struct User {
        let id: Int
        let name: String
        let bio: String
    }
}

 

기존 class 타입의 AppState 코드를 구조체로 변경한다. 이러면 더이상 @Published로 변수를 선언하지 않아도 된다.

여기에 ObservableObject를 준수하기 위해서 구조체를 감싸는 클래스를 새로 선언해야함(Store)

 

 

 

 

 

 

 

 

final class Store<Value, Action>: ObservableObject {
    let reducer: (inout Value, Action) -> Void
    @Published var value: Value
    
    init(initialValue: Value, reducer: @escaping (inout Value, Action) -> Void) {
      self.value = initialValue
      self.reducer = reducer
    }
    
    func send(_ action: Action) {
        self.reducer(&self.value, action)
    }
}

 

AppState의 변화를 감지하는 Store<AppState> 객체를 생성하기 위한 클래스를 정의한다.

 

Store 클래스의 역할: 값 유형을 래핑해서 관찰자에게 훅 제공
AppState에 대해서는 알 필요가 없기 떄문에 제네릭 타입으로 선언

 

 

 

 

 

 

 

// 사용자 액션 타입 지정
enum CounterAction {
    case decrementTapped
    case incrementTapped
}
enum PrimeModalAction {
    case saveFavoritePrimeTapped
    case removeFavoritePrimeTapped
}
enum FavoritePrimesAction {
    case deleteFavoritePrimes(IndexSet)
}
enum AppAction {
    case counter(CounterAction)
    case primeModal(PrimeModalAction)
    case favoritePrimes(FavoritePrimesAction)
}


func appReducer(state: inout AppState, action: AppAction) -> Void {
    switch action {
    case .counter(.decrementTapped):
        state.count -= 1
    case .counter(.incrementTapped):
        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)))
        }
    }
}

 

사용자 액션 타입과 그에 따른 액션을 정의한다

 

 

 

 

 

 

 

 

@ObservedObject var store: Store<AppState, AppAction>

 

ObservedObject 변수를 다음과 같이 변경해준다

 

 

 

 

 

 

 

 

 

 

상태 변화에 따른 행동을 reducer에 격리해서 store에서 send() 메서드 호출을 통해 할 수 있도록 한다.