Reswift로 Redux 아키텍처 샘플 제작
Redux 구조로 계수기 응용 프로그램을 제작합니다.
Redux 를 경험하는 것이 목적입니다.
동작은 아래의 느낌.
모든 원본 코드는 이쪽에 있습니다.
Redux 아키텍처의 등장인물입니다.
레드ux의 등장인물을 소개한다.
View
화면 표시와 사용자 이벤트를 처리합니다.
State
응용 프로그램 상태를 관리합니다.
Action
State를 변경하는 방법을 나타냅니다.
Reducer
State 및 Action에서 새 State를 생성합니다.
Store
State 및 Reducer가 포함되어 있습니다.
나는 Action의 패치를 맡는다.
Redux 프로세스
주로 다음 절차로 응용 프로그램의 상태를 업데이트합니다.
1. View에서 이벤트 발생
2. 트리거 이벤트
Store
배포Action
3. 분파Reducer
와 기존Action
에서 새로운State
생성4. 모니터링 업데이트
State
State
카운터 프로그램 만들기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
}
}
설치Action
Reducer
와 기존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
}
}
번들 설치State
State
경로에 있는 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
}
설치Reducer
appReducer -> CounterState.reducer
는 다음과 같은 특징을 가지고 있다.1. 어플리케이션 중 하나
2.유지
Store
,Store
3. 패치 담당State
Reducer
생성.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 업데이트
소스 코드 여기 있습니다.
참조 링크
Reference
이 문제에 관하여(Reswift로 Redux 아키텍처 샘플 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h-taro/items/b8d71b3437ff7f034f35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)