MVI Architecture 논의

[iosdevSW]

MVI 아키텍처 구조를 어떤 구조로 가져가는게 좋을까요??

1. 구조A: 가장 간단한 구조 + Effect

• User -> Action(Effect) -> State -> View -> User 흐름을 가짐
• Action, State는 ViewModel이 가지고 있음
• View는 ViewModel을 가지고 있음

2. 구조B: 가장 간단한 구조

User -> Action(Task) -> State -> View -> User

• Effect가 없음, 비동기가 필요한경우 Action에서 Task 열어서 하나의 액션에서 처리
• Action, State는 ViewModel에서 선언
• View는 ViewModel을 가지고 있음

3. 구조C: TCA 커스텀 구조

User -> Action(Effect) -> Reducer -> State -> View -> User

• Reducer에서 State, Action를 선언

• View는 Store를 참조

• Store는 State와 Reducer를 참조

• Store: State관리, 사용자에게 Action을 받으면 Reducer에게 전달

• Reducer: Action을 받아 State 변경 또는 Effect 방출 하는 순수함수

4. 구조D: TCA 커스텀 구조 - Effect

User -> Action -> Reducer -> State -> View -> User

• Effect가 없음, 비동기가 필요한경우 Action에서 Task 열어서 하나의 액션에서 처리
• Reducer에서 State, Action를 선언
• View는 Store를 참조
• Store는 State와 Reducer를 참조

---

• Store: State관리, 사용자에게 Action을 받으면 Reducer에게 전달
• Reducer: Action을 받아 State 변경 또는 Effect 방출 하는 순수함수

구조A	구조B	구조C	구조D

개인적으로 구현해보면서 D가 가장 깔끔하고 좋은 느낌이였습니다.
Effect로 SideEffect를 책임분리 시키면서 Response Action을 관리하는게 개인적으로 Action이 너무 많아져서 별로였던 경험이 있어 Effect는 두지 않았고

• Store는 View와의 소통 담당
• Reducer는 액션을 받아 상태 변경
• State는 뷰 상태 저장
• View는 State에 맞게 UI업데이트
  로 가장 깔끔하지 않나 싶습니다.

그리고 이 구조가 Store 구현체가 있어서 @dynamicMemberLookup을 일일이 달아주지 않는것도 좋았습니당

하나 걸리는 점은 비동기 코드를 작성할때 늘 Depth 2가 항상 들어간다는건 단점인데 어떻게 해결하는게 좋을까요~?

Task {
    do {
    /// 실행코드
    } catch {
    /// 에러처리
    }
}

[iosdevSW]

D 구조로 했을때 예제 코드 입니다.

• Reducerable

public protocol ReducerableD {
    associatedtype State
    associatedtype Action
    
    var state: State { get }
    
    func reduce(state: inout State, action: Action)
}

• Reducer

final class DReducer: ReducerableD {
    @Published var state: State = .init()
    
    struct State {
        var number: Int = 0
    }
    
    enum Action {
        case increaseNumber
        case decreaseNumber
        case fetchRandomNumber
    }
    
    func reduce(state: inout State, action: Action) {
        switch action {
        case .increaseNumber:
            state.number += 1
        case .decreaseNumber:
            state.number -= 1
        case .fetchRandomNumber:
            Task {
                do {
                    self.state.number = try await fetchRandomNumber()
                } catch {
                    print(error.localizedDescription)
                }
            }
        }
    }
}

// MARK: - Private Method
private extension DReducer {
    func fetchRandomNumber() async throws -> Int {
        return try await MockService().fetchRandomNumber()
    }
}

• Store

import Foundation

public typealias StoreOfD<R: ReducerableD> = Store<R.State, R.Action>

@dynamicMemberLookup
public final class StoreD<State, Action>: ObservableObject {
    
    private var activeTasks: Set<Task<Void, Error>> = []
    private let reducer: AnyReducerD<State, Action>
    
    @Published public private(set) var state: State
    
    subscript<T>(dynamicMember keyPath: KeyPath<State, T>) -> T {
        self.state[keyPath: keyPath]
    }
    
    public init<R: ReducerableD>(reducer: R) where R.State == State, R.Action == Action {
        self.reducer = AnyReducerD(reducer)
        self.state = reducer.state
    }
    
    public func send(_ action: Action) {
        reducer.reduce(state: &state, action: action)
    }
}

• View

import SwiftUI

struct DView: View {
    @EnvironmentObject var store: StoreOfD<DReducer>
    
    var body: some View {
        VStack(spacing: .zero) {
            Text("\(store.number)")
                .padding()
            HStack(spacing: .zero) {
                Button {
                    store.send(.increaseNumber)
                } label: {
                  Text("증가")
                }
                
                Button {
                    store.send(.decreaseNumber)
                } label: {
                    Text("감소")
                }
                
                Button {
                    store.send(.fetchRandomNumber)
                } label: {
                    Text("난수")
                }
            }
        }
    }
}

[namsoo5]

1. iOS18타겟인만큼 최신버전 문법사용하면 좋겟다는 생각이들어서 코멘트 남겨봐요 😉

• ObservableObject -> @Observable
• @Published 문법 제거

2. reducer쪽에서 state를 inout참조해서 변경하는 방식말고 불변성을 두고 새로운 State() 인스턴스를 만들어서 반환하는건 어떤가 제안해봅니당
   MVI에서 reducer의 정의가 상태의 변경보단 새로운 상태를 나타내서 한번 제안해봤습니당

3. 중복된 값이 들어왔을때 상태 업데이트를 제한 할 수 있는 로직도 있으면 좋을거같습니다.
   만약 isError가 true인 상태에서 알림창을 띄우는 로직이있다고 할때
   새로운 상태값이 적용되고 뷰 리랜더가 일어날때 알림창이 또 발생할 수 있을거 같아서요
   (알림창같은경우는 @binding 가능하면 상관없을거 같긴하네용 False처리될거라,
   이외에도 뭔가 1회성으로 보여야할 상태인데 중복해서 보일 여지가 있다고생각해서 우선 남겨용)

4. 뷰간 전환, 라우팅은 어떻게 할 예정이였는지 생각이 궁금해요

[iosdevSW]

@namsoo5

1. 구조 A,B로 가져갔을 경우 @observable은 프로토콜에 붙일 수 없어서 ViewModel마다 붙여야해서 번거로울 것 같구!
   구조 C,D로 가져간다면 바로 반영하겠습니다!!

2. 정의는 그게 맞긴 하지만 새로운 인스턴스 생성에 따른 복사 비용때문에 TCA도 이런 방식을 사용한다고 알고 있어서 TCA에 따라 성능을 고려해 inout으로 구현했습니다.

3. 이거는 아직 안와닿아서 모르곘어요,, 😂

4. Coordinator 만들어서 처리하면 좋을 것 같은데 담당자를 정해볼까요 🤗 남수형이 또 잘하긴 할텐데 핳하하

[hoBahk]

👍👍👍

Coordinator는 저도 생각해보겠습니다~

[namsoo5]

보다보니까 이거 AnyReducer역할이 랩핑 한번더 한느낌이라 이거 제거할 수 있어보이는데 맞나? 한번봐줘!!

View -> Store -> AnyReducer -> Reducer -> State
View -> Store -> Reducer -> State

//struct AnyReducerD<State, Action>: ReducerableD {
//    
//    let state: State
//    
//    private let _reduce: (inout State, Action) -> Void
//    
//    init<R: ReducerableD>(_ reducer: R) where R.State == State, R.Action == Action {
//        self.state = reducer.state
//        self._reduce = reducer.reduce
//    }
//    
//    func reduce(state: inout State, action: Action) {
//        return _reduce(&state, action)
//    }
//}

public typealias StoreOfD<R: ReducerableD> = StoreD<R.State, R.Action>

@Observable
@dynamicMemberLookup
public final class StoreD<State, Action> {
    
    private var activeTasks: Set<Task<Void, Error>> = []
//    private let reducer: AnyReducerD<State, Action>
    private let _reduce: (inout State, Action) -> Void
    
    public private(set) var state: State
    
    subscript<T>(dynamicMember keyPath: KeyPath<State, T>) -> T {
        self.state[keyPath: keyPath]
    }
    
//    public init<R: ReducerableD>(reducer: R) where R.State == State, R.Action == Action {
//        self.reducer = AnyReducerD(reducer)
//        self.state = reducer.state
//    }
    
//    public func send(_ action: Action) {
//        reducer.reduce(state: &state, action: action)
//    }
    
    public init<R: ReducerableD>(reducer: R) where R.State == State, R.Action == Action {
        self._reduce = reducer.reduce
        self.state = reducer.state
    }
    
    public func send(_ action: Action) {
        _reduce(&state, action)
    }
}

이렇게하면 되긴하던데 좀 다른가??

[iosdevSW]

오 이렇게 줄이는 방법도 있구나!
동작은 똑같이 되는 것 같아!! 근데 이게 Store가 Reducer를 가지고 있다고 볼 수 있는건가!?!?

[namsoo5]

개인적인 궁금증!! (편하게 의견말씀해주십셔 🙇‍♂️)
지금 Store라는 중간단계를 거치는데 이거 단계를 둬서 뭔가 복잡한 부분이 존재하는거같은데

1. 역할이어떻게되는지, 장점? 이타입이 잇어야하는 이유가 혹시있을까? (궁금)
2. Store을 제거한 아래코드랑 크게 다른부분이 존재하나 궁금하기도해!
   tca같은경우는 effect를 반환해서 내부적으로 처리해주니까 뭔가 차별점이 있을거같은데 지금같은경우는
   state를 바이패스해서 받아서 수정하는정도의 역할이라고 생각들었어!

struct MVIView: View {
    @State private var viewModel: ViewModel = .init()
    
    var body: some View {
        VStack {
            Text("\(viewModel.state.num)")
            Text("\(viewModel.num)")
            
            Button {
                viewModel.send(action: .asyncTask)
            } label: {
                Text("감소")
            }
        }
        
    }
}

#Preview {
    MVIView()
}


protocol Reducerable {
    associatedtype State
    associatedtype Action
    
    var state: State { get }
    
    func send(action: Action)
}

@Observable
@dynamicMemberLookup
final class ViewModel: Reducerable {
    var state: State = .init()
    
    subscript<T>(dynamicMember keyPath: KeyPath<State, T>) -> T {
        self.state[keyPath: keyPath]
    }
    
    struct State {
        var num: Int = 0
    }
    
    enum Action {
        case tapButton
        case asyncTask
    }
    
    func send(action: Action) {
        switch action {
        case .tapButton:
            state.num += 1
        case .asyncTask:
            Task {
                let num = await delay()
                await MainActor.run {
                    state.num -= num
                }
            }
        }
    }
    
    private func delay() async -> Int {
        try? await Task.sleep(for: .seconds(2))
        return 10
    }
}

[iosdevSW]

A랑 D구조는 많이 짬뽕된 방식이라 모순된게 많은것 같고
형이 방금 보여준 예시는 구조 B인 것 같은데 가장 간단한 B로 하거나 TCA방식인 C구조중에 하나 정하면 될듯!?

[namsoo5]

아래처럼 dynamicMemberLookup은 한번만해도 될거같고

@dynamicMemberLookup
protocol Reducerable {
    associatedtype State
    associatedtype Action
    
    var state: State { get }
    
    func send(action: Action)
}

extension Reducerable {
    subscript<T>(dynamicMember keyPath: KeyPath<State, T>) -> T {
        self.state[keyPath: keyPath]
    }
}

[namsoo5]

난 @Observable은 어쩔수없다고 생각하는편이긴해!
ViewModel: ObservableObject 매번 선언하듯이... 뗄수없는 존재랄까...
ObservableObject이거하면 Published도 계속붙여야하니까

[iosdevSW]

아래처럼 dynamicMemberLookup은 한번만해도 될거같고

@dynamicMemberLookup
protocol Reducerable {
    associatedtype State
    associatedtype Action
    
    var state: State { get }
    
    func send(action: Action)
}

extension Reducerable {
    subscript<T>(dynamicMember keyPath: KeyPath<State, T>) -> T {
        self.state[keyPath: keyPath]
    }
}

🤩🤩 기본구현이 있었지 좋다!

[iosdevSW]

@observable은 파일 템플릿 만들지 뭐~!