Reswift로 Redux 아키텍처 샘플 제작

10083 단어 SwiftReSwiftredux
개요
Redux 구조로 계수기 응용 프로그램을 제작합니다.
Redux 를 경험하는 것이 목적입니다.
동작은 아래의 느낌.

모든 원본 코드는 이쪽에 있습니다.
Redux 아키텍처의 등장인물입니다.
레드ux의 등장인물을 소개한다.
View
화면 표시와 사용자 이벤트를 처리합니다.
State
응용 프로그램 상태를 관리합니다.
Action
State를 변경하는 방법을 나타냅니다.
Reducer
State 및 Action에서 새 State를 생성합니다.
Store
State 및 Reducer가 포함되어 있습니다.
나는 Action의 패치를 맡는다.
Redux 프로세스
주로 다음 절차로 응용 프로그램의 상태를 업데이트합니다.
1. View에서 이벤트 발생
2. 트리거 이벤트Store 배포Action3. 분파Reducer와 기존Action에서 새로운State 생성
4. 모니터링 업데이트StateState카운터 프로그램 만들기
Redux의 실제 설치를 경험해 보세요.
프로젝트 작성
Xcode로 새 프로젝트를 만듭니다.
그런 다음 Swift Package Manager를 사용하여 ReSwift를 설치합니다.
설치View계수기 응용이기 때문에 숫자에 대해 상태 관리를 한다.
State/CounterState.swift
struct CounterState {
    var number: Int = 0
}
설치State숫자 하나Action를 늘리고 감소Action를 준비한다.
State/CounterState.swift
extension CounterState {
    enum Action: ReSwift.Action {
        case increment
        case decrement
    }
}
설치ActionReducer와 기존Action에서 새로운State을 생성한다.
CounterState.swift
extension CounterState {
    ...
    static func reducer(action: ReSwift.Action, state: CounterState?) -> CounterState {
        var state = state ?? CounterState()

        guard let action = action as? CounterState.Action else { return state }
        switch action {
        case .increment:
            state.number += 1
        case .decrement:
            state.number -= 1
        }

        return state
    }
}

번들 설치StateState 경로에 있는 AppState를 설치합니다.
다중 이름은 State입니다.
AppState.swift
struct AppState {
    var counterState = CounterState()
}
State에 대응하는 AppState 구현AppState에 해당하는 Reducer를 설치합니다.
발생AppState을 낮은 Reducer에 건네주다.
이번 경우Action.
AppState.swift
func appReducer(action: ReSwift.Action, state: AppState?) -> AppState {
    var state = state ?? AppState()
    state.counterState = CounterState.reducer(action: action, state: state.counterState)
    return state
}
설치ReducerappReducer -> CounterState.reducer는 다음과 같은 특징을 가지고 있다.
1. 어플리케이션 중 하나
2.유지Store,Store3. 패치 담당StateReducer생성.
AppDelegate.swift
import UIKit
import ReSwift

let appStore = ReSwift.Store<AppState>(reducer: appReducer, state: nil)
...
버튼 클릭 시 디스패치Action버튼을 눌렀을 때 분배하여 새 AppDelegate 을 생성합니다.
또한 Action View의 이벤트를 모니터링할 수 있습니다.
ViewController.swift
import UIKit
import ReSwift

class ViewController: UIViewController, StoreSubscriber {
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        appStore.subscribe(self)
    }

    func newState(state: AppState) {
        label.text = String(state.counterState.number)
    }

    @IBAction func tapCountUpButton(_ sender: UIButton) {
        appStore.dispatchFunction(CounterState.Action.increment)
    }

    @IBAction func tapCountDownbutton(_ sender: UIButton) {
        appStore.dispatch(CounterState.Action.decrement)
    }
}
Redux의 데이터 스트림을 구현했습니다.
1. View에서 이벤트 발생
2. Store 출시 Action
3. Reducter 분석 Action, 새 State 생성
4. 새 State를 기반으로 View 업데이트
소스 코드 여기 있습니다.
참조 링크

좋은 웹페이지 즐겨찾기