Reswift로 Redux 아키텍처 샘플 제작
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 업데이트
소스 코드 여기 있습니다.
참조 링크
Reference
이 문제에 관하여(Reswift로 Redux 아키텍처 샘플 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h-taro/items/b8d71b3437ff7f034f35텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)