SwiftUI에서 애플리케이션 개발. 1부: Dataflow 및 Redux

WWDC 2019의 State of the Union 세션에 참석한 후 저는 SwiftUI에 대해 자세히 알아보기로 결정했습니다. 저는 이 작업에 많은 시간을 보냈고 이제 광범위한 사용자에게 유용할 수 있는 실제 응용 프로그램을 개발하기 시작했습니다.

저는 이것을 MovieSwiftUI라고 불렀습니다. 이것은 새 영화와 오래된 영화를 검색하고 다음을 사용하여 컬렉션으로 수집하는 앱입니다. TMDB API. 나는 항상 영화를 사랑했고, 오래전부터 이 분야에서 일하는 회사를 설립하기도 했습니다. 회사는 멋지다고 할 수 없지만 응용 프로그램은 훌륭했습니다!

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 교육용 온라인 과정 "직업 자바 개발자".

그렇다면 MovieSwiftUI는 무엇을 할 수 있나요?

• API와 상호작용합니다. 거의 모든 최신 애플리케이션이 이를 수행합니다.
• 요청 시 비동기 데이터를 로드하고 다음을 사용하여 JSON을 Swift 모델로 구문 분석합니다. 코딩 가능.
• 요청 시 로드된 이미지를 표시하고 캐시합니다.
• iOS, iPadOS, macOS용 이 앱은 이러한 OS 사용자에게 최고의 UX를 제공합니다.
• 사용자는 데이터를 생성하고 자신만의 영화 목록을 만들 수 있습니다. 응용 프로그램은 사용자 데이터를 저장하고 복원합니다.
• 뷰, 구성 요소 및 모델은 Redux 패턴을 사용하여 명확하게 구분됩니다. 여기서 데이터 흐름은 단방향입니다. 완전히 캐시, 복원 및 덮어쓸 수 있습니다.
• 이 애플리케이션은 SwiftUI, TabbedView, SegmentedControl, NavigationView, Form, Modal 등의 기본 구성 요소를 사용합니다. 또한 사용자 정의 보기, 제스처, UI/UX를 제공합니다.

사실 애니메이션은 매끄러웠고, GIF는 좀 엉뚱하게 나왔네요.

앱 작업을 하면서 많은 경험을 하게 되었고 전반적으로 긍정적인 경험을 했습니다. 저는 완전한 기능을 갖춘 애플리케이션을 작성할 수 있었고, 13월에 이를 개선하여 iOS XNUMX 출시와 동시에 AppStore에 게시할 예정입니다.

Redux, BindableObject 및 EnvironmentObject

나는 약 XNUMX년 동안 Redux를 사용해왔기 때문에 상대적으로 Redux에 대해 잘 알고 있습니다. 특히 저는 프론트엔드에서 이것을 사용합니다. 반응 웹사이트는 물론 기본 iOS(Swift) 및 Android(Kotlin) 애플리케이션 개발에도 사용됩니다.

저는 SwiftUI 애플리케이션 구축을 위한 데이터 흐름 아키텍처로 Redux를 선택한 것을 결코 후회하지 않습니다. UIKit 앱에서 Redux를 사용할 때 가장 어려운 부분은 스토어와 작업하고 데이터를 가져오고 검색하여 뷰/컴포넌트에 매핑하는 것입니다. 이를 위해 ReSwift 및 ReKotlin을 사용하여 일종의 커넥터 라이브러리를 만들어야 했습니다. 잘 작동하지만 코드가 꽤 많습니다. 불행히도 아직은 오픈 소스가 아닙니다.

좋은 소식! Redux를 사용할 계획이라면 SwiftUI에서 걱정해야 할 유일한 것은 상점, 상태 및 리듀서입니다. @EnvironmentObject 덕분에 SwiftUI가 상점과의 상호작용을 완벽하게 처리합니다. 따라서 저장소는 BindableObject로 시작됩니다.

간단한 Swift 패키지를 만들었습니다. SwiftUIFlux, Redux의 기본 사용법을 제공합니다. 제 경우에는 MovieSwiftUI의 일부입니다. 나도 단계별 튜토리얼을 작성했습니다, 이 구성요소를 사용하는 데 도움이 됩니다.

어떻게 작동합니까?

final public class Store<State: FluxState>: BindableObject {
    public let willChange = PassthroughSubject<Void, Never>()
        
    private(set) public var state: State
    
    private func _dispatch(action: Action) {
        willChange.send()
        state = reducer(state, action)
    }
}

작업을 실행할 때마다 기어박스가 활성화됩니다. 애플리케이션의 현재 상태에 따라 작업을 평가합니다. 그런 다음 작업 유형 및 데이터에 따라 수정된 새 상태를 반환합니다.

store는 BindableObject이기 때문에 PassthroughSubject에서 제공하는 willChange 속성을 사용하여 값이 변경되면 SwiftUI에 알립니다. 이는 BindableObject가 PublisherType을 제공해야 하지만 프로토콜 구현이 이를 관리할 책임이 있기 때문입니다. 전반적으로 이것은 Apple의 매우 강력한 도구입니다. 따라서 다음 렌더링 주기에서 SwiftUI는 상태 변경에 따라 뷰의 본문을 렌더링하는 데 도움을 줍니다.

실제로 이것이 SwiftUI의 핵심이자 마법입니다. 이제 상태를 구독하는 모든 뷰에서는 상태에서 수신된 데이터와 변경된 내용에 따라 뷰가 렌더링됩니다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
 
    var window: UIWindow?
 
 
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            
            let controller = UIHostingController(rootView: HomeView().environmentObject(store))
            window.rootViewController = controller
            self.window = window
            window.makeKeyAndVisible()
        }
    }
}
 
struct CustomListCoverRow : View {
    @EnvironmentObject var store: Store<AppState>
    
    let movieId: Int
    var movie: Movie! {
        return store.state.moviesState.movies[movieId]
    }
    
    var body: some View {
        HStack(alignment: .center, spacing: 0) {
            Image(movie.poster)
        }.listRowInsets(EdgeInsets())
    }
}

Store는 애플리케이션이 시작될 때 EnvironmentObject로 주입되고 @EnvironmentObject를 사용하여 모든 뷰에서 액세스할 수 있습니다. 파생 속성은 애플리케이션 상태에서 빠르게 검색되거나 계산되므로 성능 저하가 없습니다.

위의 코드는 영화 포스터가 변경되면 이미지를 변경합니다.

그리고 이것은 실제로 단 하나의 선으로 이루어지며, 이를 통해 뷰가 상태에 연결됩니다. iOS에서 ReSwift를 사용해본 적이 있거나 심지어 잇다 React를 사용하면 SwiftUI의 마법을 이해하게 될 것입니다.

이제 작업을 활성화하고 새 상태를 게시할 수 있습니다. 다음은 더 복잡한 예입니다.

struct CustomListDetail : View {
    @EnvironmentObject var store: Store<AppState>
 
    let listId: Int
    
    var list: CustomList {
        store.state.moviesState.customLists[listId]!
    }
    
    var movies: [Int] {
        list.movies.sortedMoviesIds(by: .byReleaseDate, state: store.state)
    }
    
    var body: some View {
        List {
            ForEach(movies) { movie in
                NavigationLink(destination: MovieDetail(movieId: movie).environmentObject(self.store)) {
                    MovieRow(movieId: movie, displayListImage: false)
                }
            }.onDelete { (index) in
               self.store.dispatch(action: MoviesActions.RemoveMovieFromCustomList(list: self.listId, movie: self.movies[index.first!]))
            }
        }
    }
}

위 코드에서는 각 IP에 대해 SwiftUI의 .onDelete 작업을 사용하고 있습니다. 이를 통해 목록의 행에 일반 iOS 스와이프를 표시하여 삭제할 수 있습니다. 따라서 사용자가 삭제 버튼을 터치하면 해당 작업이 실행되고 목록에서 영화가 제거됩니다.

음, 목록 속성은 BindableObject 상태에서 파생되고 EnvironmentObject로 주입되므로 ForEach가 영화 계산 속성과 연결되어 있기 때문에 SwiftUI는 목록을 업데이트합니다.

다음은 MoviesState 감속기의 일부입니다.

func moviesStateReducer(state: MoviesState, action: Action) -> MoviesState {
    var state = state
    switch action {
    
    // other actions.
    
    case let action as MoviesActions.AddMovieToCustomList:
        state.customLists[action.list]?.movies.append(action.movie)
        
    case let action as MoviesActions.RemoveMovieFromCustomList:
        state.customLists[action.list]?.movies.removeAll{ $0 == action.movie }
        
    default:
        break
    }
    return state
}

위에서 설명한 대로 액션을 전달하고 새 상태를 반환하면 리듀서가 실행됩니다.

아직은 자세히 설명하지 않겠습니다 - 어떻게 SwiftUI가 표시할 내용을 실제로 아는지. 이것을 더 깊이 이해하려면 가치가 있습니다. 데이터 흐름에 대한 WWDC 세션 보기 SwiftUI에서. 왜, 언제 사용해야 하는지 자세히 설명되어 있습니다. 주 정부, @Binding, ObjectBinding 및 EnvironmentObject.

Skillbox는 다음을 권장합니다.

• 실기 코스 "모바일 개발자 PRO".
• 온라인 강좌 적용 "파이썬 데이터 분석가".
• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".

출처 : habr.com