用SwiftUI + Combine + Redux做一个iOS
上一篇文章中提到有了SwiftUI这声明式的编程语法，再加上Combine的State管理，我们就可以通过Reactive Programming响应式编程来写一个iOS app了，就像React一样。提到React，可能就会想到Redux，能不能在iOS也用上Redux呢？答案是肯定的。
我用这个技术栈写了一个简单的展示上海当地活动的app，已经传到了github：
https://github.com/ShuaJJ/Cheers90s
我只加了一部分注释，在这里详细介绍一下这个app的架构和具体实现！
首先我们用到了第三方库SwiftUIFlux，是国外iOS开发者Thomas Ricouard根据Combine的特性为iOS写的Redux框架，我们只需用Swift Package import一下，便可以直接像React一样用Store, Reducer, Action, Props了：
https://github.com/Dimillian/SwiftUIFlux
关于此技术栈的知识我也都是看这位大神的blogs学的，这算是我的学习心得。
Store
Store的作用就是包含整个app的state，和一个全局reducer. 我们在SwiftUI中，可以通过store来获取state中的数据，还有dispatch一个action。首先我们需要在SceneDelegate中声明store，然后将store作为一个EnvironmentObject传入rootViewController。
let store = Store<AppState>(reducer: appReducer,
middleware: [loggingMiddleware], // 还可以传入middleware
state: AppState())
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
...
window.rootViewController = UIHostingController(rootView:
StoreProvider(store: store) {
HomeView()
}
)
...
}
StoreProvider是SwiftUIFlux中的一个view，它会将wrap的view镶嵌一个store然后返回
public struct StoreProvider<S: FluxState, V: View>: View {
...
public var body: some View {
content().environmentObject(store)
}
}
这样一来我们在所有view中都可以使用store了，只要将它声明成EnvironmentObject就行：
@EnvironmentObject var store: Store<AppState>
store.state.eventsState.goingList // 获取store里state中的数据
self.store.dispatch(action: EventsAction.LikeEvent(...)) // dispatch一个action
Map和Props
相较于store，在React中我们更常用map和props来获取state中的数据，SwiftUIFlux也支持。首先我们要在需要让用到props的SwiftUI view继承SwiftUIFlux中的ConnectView：
struct EventsView: ConnectedView {
struct Props { // 1
let events: [String]
let eventsInfo: [String: Event]
}
func map(state: AppState, dispatch: @escaping DispatchFunction) -> Props { // 2
return Props(events: state.eventsState.eventsList[selectedCategory.selectedCategory] ?? [],
eventsInfo: state.eventsState.events)
}
func body(props: Props) -> some View { props.events } // 3
}
1、需要定义一个Props struct，然后在里面声明你在这个view中所需要的state中的数据
2、实现map func，返回包含你从State中获取数据的Props
3、你需要改写body func，传入参数props，然后就可以在view中用props的数据了
Action和Reducer
SwiftUIFlux提供了两种Action：Action和AsyncAction。AsyncAction就是在View中触发某个事件时，dispatch的需要进行网络请求的action，dispatch后会运行自己的execute func完成API call；而Action就是在AsyncAction完成网络请求，拿到数据后，dispatch给reducer的action。Reducer会根据action的种类更新state
举个例子：
Button(action: {
self.store.dispatch(action: EventsAction.LikeEvent())
}) { ... }
在某个view中有一个button，点击会触发LikeEvent这个AsyncAction
struct LikeEvent: AsyncAction {
func execute(state: FluxState?, dispatch: @escaping DispatchFunction) {
APIService.shared.PUT(...) { ... }
}
}
AsyncAction运行execute，进行网络请求
(result: Result<Response<Event>, APIService.APIError>) in
switch result {
case .success(let response):
dispatch(bookmarkEvent(...))
case .failure(let error):
print("FetchEventsError: \(error)")
break
}
成功获取数据后，我们再dispatch Action “ bookmarkEvent”
func eventsReducer(state: EventsSate, action: Action) -> EventsSate {
var state = state
switch action {
case let action as EventsAction.bookmarkEvent:
let eventId = action.eventId
...
return state
default:
return state
}
}
Reducer接收到Action，根据Action的type，更新state并返回。等下，还没结束：
var liked: Bool {
return store.state.eventsState.goingList.contains(eventId)
}
Image(systemName: "heart.fill")
.resizable()
.frame(width: likeButtonWidth, height: likeButtonWidth)
.opacity(self.liked ? 1 : 0.3)
state更新之后，上面某个view里代码中的liked便会立即做出对应的变化，而SwiftUI中的Image就会刷新，整个流程就算完成了。
State
这个State是SwiftUIFlux中的State，也就是Redux中的State，不是Combine的@State。
struct EventsSate: FluxState, Codable {
var events: [String: Event] = [:]
var eventsList: [EventCategory: [String]] = [:]
var goingList: [String] = []
enum CodingKeys: String, CodingKey {
case events, goingList
}
}
定义一个state也很简单，只需要继承SwiftUIFlux中的FluxState，然后声明自己所需的变量即可。这里遵循了Codable是便于app可以将State归档缓存。
总结
其他实现细节可以下载项目查看代码，结构都很易懂
项目地址：https://github.com/ShuaJJ/Cheers90s
iOS有了这个新技术栈，对于React开发者肯定是个好消息，相当于只要会了SwiftUI的语法就可以开发iOS app了；对于已经有多年UIKit经验的开发者们，不知道你们愿不愿意开始使用新技术，总之我觉得这就是iOS开发的未来。
