链接:https://juejin.cn/post/6912251186770870286
早些年在编写 React 项目时,就接触过 Redux。先来看看它到底是什么?
Redux 是什么?
Redux 是为 JavaScript 应用程序编写的可预测状态容器。它把所有程序相关的状态和逻辑中心化,帮助我们编写行为一致(可以理解为UI 显示的数据总是与State 保持一致)的应用。详细了解 Redux,可以访问 Redux。
Redux 的基本原理
下面是一张 Redux 的工作流程图:
从图中可以看到,Redux 的整个模式由四个组件组成:Store、View、Action 和 Reducer。
- Store:持有整个程序的数据(State),在整个程序中只有一个 Store。
- View:程序展示给用户的所有 UI 组件,负责与用户交互。
- Action:用户对某个 View 的操作而触发的一个行为。例如点击搜索按钮而触发搜索请求,这个搜索请求就是一个 Action。
- Reducer:一个纯函数,它接收 Action 和当前 State 作为参数,通过一系列运算,返回一个新的 State。
Redux 的工作流程:
- 用户和 View 交互,产生一个 Action
- Store 把 Action 派发给 Reducer
- Reducer 经过运算,返回新的 State 给 Store,通常来说,只在 Reducer 中修改 State
- Store 通知 View 刷新 UI
Redux 在 SwiftUI 中的简单实现
SwiftUI 的核心思想跟 React 一样,都是响应式编程。所以我们可以参考 React 的 Redux 实现 SwiftUI 的 Redux。
假设我们正在开发一个非常简单的应用:UI 上显示一个数字 0,每次用户点击按钮,数字就加 1。
State
首先需要一个 State 来描述应用的数据,定义如下:
struct AppState {
var count: Int
init(count: Int = 0) {
self.count = count
}
}
Store
final class Store: ObservableObject {
@Published private(set) var state: AppState
init(initialState: AppState = .init()) {
self.state = initialState
}
}
在上面的代码中,把 Store
定义为 class 类型,遵循 ObservableObject
协议,这样我们就可以通过 SwiftUI 的 Environment
特性把唯一的一个 Store 对象注入到根视图中,然后子视图也可以访问 Store 中的 State。state
被 @Published
标记,它能在 state 发生变化时通知 SwiftUI 刷新 View。
这里有一个iOS交流圈:891 488 181 可以来了解,分享BAT,阿里面试题、面试经验,讨论技术,裙里资料直接下载就行, 大家