Present in iPlayground 2018 https://iplayground.io/

1. Refactor:
From MVC to Redux
Jeff Lin @oath

2. Refactor:
From MVC to Redux
之 停看聽

3. Redux on web，每個single page的store是獨立的，但App則否
可以嘗試應用在有用到singleton的部分，如Authentication manager, location
manager
不要衝動，先聽完這場
先說結論

4. Agenda
從Model, view, controller談起
什麼是redux？
Concern of redux on App

5. 從一個簡易的weather App開始
讀入json file並列出氣象站
Query API，顯示選定的氣象站目前天氣
顯示目前的雷達回波圖

6. 先談Model, View, Controller

7. 顯示測站列表
viewDidLoad: add views
prepareData: load station data
UITableViewDataSource
StationListViewController
plist loader/data parser
tableView dataSource/provider
DataObject
struct WeatherStation: Codable {
let stationId : String?
let name : String
}

8. reflectivity
API fetcher
weather
detail API
fetcher
顯示測站資料
viewDidLoad: add views
Fetch weather detail Fetch reflectivity
WeatherDetailViewController
Update detail Update reflectivity image

9. What's redux?

10. What's redux?
ReactiveX

11. What's redux?
單一向資料流
Store：保存目前App的狀態、發動Action、發佈state的改變
Action：提供store相關參數的唯一來源
Reducer：pure function，根據現有的state和傳入action，決定下一個state是什麼

12. View
StoreReducerAction
UpdateCreate
CurrentS
tate
New
State

13. Three Principles
Single source of truth
所有的狀態、資料皆來自store
State is read-only
所有的狀態改變都由dispatch action來完成
Changes are made with pure functions
由pure reducer 處理action，決定下一個state

14. Pure and impure function
不該改變傳入的參數
不該呼叫non-pure function
不該有side effect(call API, change route)
Swift本身的型別限制幫了一些忙
// Pure function
func square(x) {
return x * x
}
func squareAll(items: [Int]) {
return items.map(square)
}

15. ReSwift
Redux-like implementation of the unidirectional data flow architecture in Swift
ReSwift-Router
處理App中個頁面navigation的state
ReSwift-Recorder
記下Action的時間軸，方便做到time travel

16. Redux架構，一個新的view controller會有什麼？
設計這個頁面的每個State？
這個頁面需要哪些Action？
Reducer該如何處理這些Action+State
在view controller需要狀態改變的地方dispatch action
view controller subscribe store，並做出對應的update

17. 氣象App：顯示列表
viewDidLoad
載入列表檔案
or from API
UITableView
reload data
UITableView
didSelect:
push detail page
Page update:
UI event:

18. Action
protocol WeatherListAction : Action {}
struct FetchStationList : WeatherListAction { // 讀入氣象站
}
struct LocationListFetched : WeatherListAction { // 資料載入完成
let locations: [WeatherStation]?
}
struct ShowLocationDetail: WeatherListAction { // 顯示指定站天氣
let location: WeatherStation
}
// struct FetchUserLocation : WeatherListAction {}

19. State
struct WeatherListState : StateType {
var isFetchTriggered = false
var locationList : [WeatherStation]?
}

20. Reducer
func weatherListReducer(action: Action, state: WeatherListState?) -> WeatherListState {
var nextState = state ?? WeatherListState()
switch action {
case let action as LocationListFetched:
nextState.locationList = action.locations
nextState.isFetchTriggered = true
case _ as FetchStationList:
nextState.isFetchTriggered = true
nextState.locationList = nil
break
default:
nextState.locationList = nil
}
return nextState
}

21. Store
// Main Reducer
func appReducer(action: Action, state: AppState?) -> AppState {
return AppState(
weatherListState: weatherListReducer(action: action, state: state?.weatherListState),
weatherDetailState: weatherDetailReducer(action: action, state:
state?.weatherDetailState),
pageRouteState: pageRouteReducer(action: action, state: state?.pageRouteState)
)
}

22. Store
var store = MainStore(reducer: appReducer, state: nil, middleware: middlewares)

23. Subscribe and stateChange
override func viewDidLoad() {
super.viewDidLoad()
setupTableView()
store.subscribe(self)
let fetchAction = FetchStationList()
store.dispatch(fetchAction)
}
func newState(state: AppState) {
if let locationList =
state.weatherListState.locationList {
locations = locationList
tableView.reloadData()
}
}

24. 顯示測站列表
ViewController
weatherList
Reducer Store
FetchList
Action
Updatedispatch
FetchTriggered
State with
stations

25. 那API request怎麼辦？

26. reflectivity
API fetcher
weather
detail API
fetcher
顯示測站資料
viewDidLoad: add views
Fetch weather detail Fetch reflectivity
WeatherDetailViewController
Update detail Update reflectivity image

27. Action creator or middleware
func fetchWeatherDetailFor(state: AppState, store: Store<AppState>) -> Action? {
guard let station = store.state.weatherDetailState.station else { return nil }
cwbCurrentWeather(locationName: station.name, completion: { (weather, err) in
if let weather = weather {
let fetchedAction = WeatherDetailFetched.init(weather: weather)
store.dispatch(fetchedAction)
} else {
let fetchedAction = WeatherDetailFetched.init(weather: nil)
store.dispatch(fetchedAction)
}
})
return FetchWeatherDetail(isFetched: false, location: station)
}

28. About test
State check
Given state, dispatch an action
Expected action should be trigger/expect state should change

30. 看起來很美好，but...

31. store唯一 & combine reducer
func appReducer(action: Action, state: AppState?) -> AppState {
return AppState(
weatherListState: weatherListReducer(action: action, state:
state?.weatherListState),
weatherDetailState: weatherDetailReducer(action: action,
state: state?.weatherDetailState),
)
}
如果有兩個tab，
而且都可以顯示weather detail
需另設計state

32. store唯一 & combine reducer
func appReducer(action: Action, state: AppState?) -> AppState {
return AppState(
weatherListState: weatherListReducer(action: action, state:
state?.weatherListState),
weatherDetailState: weatherDetailReducer(action: action,
state: state?.weatherDetailState),
)
}
Detail page有可能永遠用不到
但state總是存在

33. data狀態&替換需要小心
non-Redux
navigationController?.
popViewController(ani
mated: true)
deinit/dealloc
invoked
data dealloc

34. data狀態&替換需要小心
Redux
navigationController?.
popViewController(ani
mated: true)
deinit/dealloc
invoked
Data still in store!
deinit {
let action = WeatherDetailReset()
store.dispatch(action)
} // Maybe...

35. web每個single page的store是獨立的，但App則否
依照redux架構，store為整個App共用，需要更小心的控制
redux的資料流可供參考，但不見得完全適用App(例如多個tab)
可以嘗試應用在有用到singleton的部分，如Authentication manager, location
manager
Summary

36. Reference
Redux document
ReduxMovieDB
Real World Flux Architecture on iOS

37. Thank you!