MVI 架构更佳实践:支持 LiveData 属性监听

开发 架构
本文主要介绍如何通过监听LiveData的属性,来实现MVI架构下的局部刷新。

前言

前面我们介绍了MVI架构的基本原理与使用:MVVM 进阶版:MVI 架构了解一下~

MVI架构为了解决MVVM在逻辑复杂时需要写多个LiveData(可变+不可变)的问题,使用ViewState对State集中管理,只需要订阅一个 ViewState 便可获取页面的所有状态。

通过集中管理ViewState,只需对外暴露一个LiveData,解决了MVVM模式下LiveData膨胀的问题。

但页面的所有状态都通过一个LiveData来管理,也带来了一个严重的问题,即页面不支持局部刷新。

虽说如果是RecyclerView可以通过DifferUtil来解决,但毕竟不是所有页面都是通过RecyclerView写的,支持DifferUtil也有一定的开发成本。

因此直接使用MVI架构会带来一定的性能损耗,相信这是很多人不愿意用MVI架构的原因之一。

本文主要介绍如何通过监听LiveData的属性,来实现MVI架构下的局部刷新。

Mavericks框架介绍

Mavericks框架是Airbnb开源的一个MVI框架,Mavericks基于Android Jetpack与Kotlin Coroutines, 主要目标是使页面开发更高效,更容易,更有趣,目前已经在Airbnb的数百个页面上使用。

下面我们来看下Mavericks是怎么使用的。

// 1. 包含页面所有状态的data class
data class CounterState(val count: Int = 0) : MavericksState
// 2.负责处理业务逻辑的ViewModel,易于单元测试
class CounterViewModel(initialState: CounterState) : MavericksViewModel<CounterState>(initialState) {
// 通过setState更新页面状态
fun incrementCount() = setState { copy(count = count + 1) }
}
// 3. View层,必须实现MavericksView接口
class CounterFragment : Fragment(R.layout.counter_fragment), MavericksView {
private val viewModel: CounterViewModel by fragmentViewModel()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
counterText.setOnClickListener {
viewModel.incrementCount()
}
}
//4. 页面刷新回调,每当状态刷新时会回调这里
override fun invalidate() = withState(viewModel) { state ->
counterText.text = "Count: ${state.count}"
}
}

如上所示,看上去也很简单,主要包括几个模块:

  1. 包括页面所有状态的Model层,其中的状态全都是不可变的,并且有默认值。
  2. 负责处理业务逻辑的ViewModel,在其中通过setState来更新页面状态。
  3. View层,必须实现MavericksView接口,每当状态刷新时都会回调invalidate函数,在这里渲染UI。

可以看出,Mavericks中View层与Model层的交互,也并没有包装成Action,而是直接暴露的方法。

上篇文章也的确有很多同学说使用Action交互比较麻烦,看起来Action这层的确可要可不要,Airbnb也没有使用,主要看个人开发习惯吧。

支持局部刷新

上面介绍了Mavericks的简单使用,下面我们来看下Mavericks是怎么实现局部刷新的 。

data class UserState(
val score: Int = 0,
val previousHighScore: Int = 150,
val livesLeft: Int = 99,
) : MavericksState {
val pointsUntilHighScore = (previousHighScore - score).coerceAtLeast(0)
val isHighScore = score >= previousHighScore
}
class CounterFragment : Fragment(R.layout.counter_fragment), MavericksView {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
//直接监听State的属性,并且支持设置监听模式
viewModel.onEach(UserState::pointsUntilHighScore,deliveryMode = uniqueOnly()) {
//..
}
viewModel.onEach(UserState::score) {
//...
}
}
}

  1. 如上所示,Mavericks可以只监听State的其中一个属性来实现局部刷新,只有当这个属性发生变化时才触发回调。
  2. onEach也可以设置监听模式,主要是为了防止数据倒灌,例如Toast这些只需要弹一次,页面重建时不应该恢复的状态,就适合使用uniqueOnly的监听模式。

Mavericks实现属性监听的原理也很简单,我们一起来看下源码。

fun <VM : MavericksViewModel<S>, S : MavericksState, A> VM._internal1(
owner: LifecycleOwner?,
prop1: KProperty1<S, A>,
deliveryMode: DeliveryMode = RedeliverOnStart,
action: suspend (A) -> Unit
) = stateFlow
// 通过对象取出属性的值
.map { MavericksTuple1(prop1.get(it)) }
// 值发生变化了才会触发回调
.distinctUntilChanged()
.resolveSubscription(owner, deliveryMode.appendPropertiesToId(prop1)) { (a) ->
action(a)
}

  1. 主要是通过map将State转化为它的属性值。
  2. 通过distinctUntilChanged方法开启防抖,相同的值不会回调,只有值修改了才会回调。
  3. 需要注意的是因为使用了KProperty1,因此State的承载数据类必须避免混淆。

如上,就是Mavericks的基本介绍,想了解更多的同学可参考:https://github.com/airbnb/mavericks。

LiveData实现属性监听

上面介绍了Mavericks是怎么实现局部刷新的,但直接使用它主要有两个问题。

  1. 接入起来略微有点麻烦,例如Fragment必须实现MavericksView,有一定接入成本。
  2. Mavericks的局部刷新是通过Flow实现的,但相信大多数人用的还是LiveData,有一定学习成本。

下面我们就来看下LiveData怎么实现属性监听。

//监听一个属性
fun <T, A> LiveData<T>.observeState(
lifecycleOwner: LifecycleOwner,
prop1: KProperty1<T, A>,
action: (A) -> Unit
) {
this.map {
StateTuple1(prop1.get(it))
}.distinctUntilChanged().observe(lifecycleOwner) { (a) ->
action.invoke(a)
}
}
//监听两个属性
fun <T, A, B> LiveData<T>.observeState(
lifecycleOwner: LifecycleOwner,
prop1: KProperty1<T, A>,
prop2: KProperty1<T, B>,
action: (A, B) -> Unit
) {
this.map {
StateTuple2(prop1.get(it), prop2.get(it))
}.distinctUntilChanged().observe(lifecycleOwner) { (a, b) ->
action.invoke(a, b)
}
}
internal data class StateTuple1<A>(val a: A)
internal data class StateTuple2<A, B>(val a: A, val b: B)
//更新State
fun <T> MutableLiveData<T>.setState(reducer: T.() -> T) {
this.value = this.value?.reducer()
}

  1. 如上所示,主要是添加一个扩展方法,也是通过distinctUntilChanged来实现防抖。
  2. 如果需要监听多个属性,例如两个属性有其中一个变化了就触发刷新,也支持传入两个属性。
  3. 需要注意的是LiveData默认是不防抖的,这样改造后就是防抖的了,所以传入相同的值是不会回调的。
  4. 同时需要注意下承载State的数据类需要防混淆。

简单使用

上面介绍了LiveData如何实现属性监听,下面看下简单的使用。

//页面状态,需要避免混淆
data class MainViewState(
val fetchStatus: FetchStatus = FetchStatus.NotFetched,
val newsList: List<NewsItem> = emptyList()
)
//ViewModel
class MainViewModel : ViewModel() {
private val _viewStates: MutableLiveData<MainViewState> = MutableLiveData(MainViewState())
//只需要暴露一个LiveData,包括页面所有状态
val viewStates = _viewStates.asLiveData()
private fun fetchNews() {
//更新页面状态
_viewStates.setState {
copy(fetchStatus = FetchStatus.Fetching)
}
viewModelScope.launch {
when (val result = repository.getMockApiResponse()) {
//...
is PageState.Success -> {
_viewStates.setState {
copy(fetchStatus = FetchStatus.Fetched, newsList = result.data)
}
}
}
}
}
}
//View层
class MainActivity : AppCompatActivity() {
private fun initViewModel() {
viewModel.viewStates.run {
//监听newsList
observeState(this@MainActivity, MainViewState::newsList) {
newsRvAdapter.submitList(it)
}
//监听网络状态
observeState(this@MainActivity, MainViewState::fetchStatus) {
//..
}
}
}
}

如上所示,其实使用起来也很简单方便。

  1. ViewModel只需对外暴露一个ViewState,避免了定义多个可变不可变LiveData的问题。
  2. View层支持监听LiveData的一个属性或多个属性,支持局部刷新。

总结

本文主要介绍了MVI架构下如何实现局部刷新,并重点介绍了Mavericks的基本使用与原理,并在其基础上使用LiveData实现了属性监听与局部刷新。

通过以上方式,解决了MVI架构的性能问题,实现了MVI架构的更佳实践。

如果你的ViewModel中定义了多个可变与不可变的LiveData,就算你不使用MVI架构,支持监听LiveData属性相信也可以帮助你精简一定的代码。

如果本文对你有所帮助,欢迎点赞关注Star~

责任编辑:庞桂玉 来源: 安卓开发精选
相关推荐

2018-11-06 12:32:02

多云云平台云计算

2024-03-11 00:00:00

应用架构开发

2017-08-11 17:20:07

LinuxShell

2018-05-30 15:15:47

混合云公共云私有云

2017-07-18 16:40:31

AndroidLiveData

2022-03-02 15:31:32

架构网络请求代码

2018-05-24 09:00:45

2011-08-18 12:19:17

vSwitchVMNIC

2021-08-26 05:27:57

Swift 监听系统泛型

2017-05-29 08:18:11

Serverless架构软件系统

2013-09-23 11:35:46

戴尔

2022-06-08 08:45:46

Redis缓存代码

2020-03-09 11:04:49

华为5G运营商

2019-11-15 15:03:34

AI工业4.0制造业

2010-06-28 17:30:34

数据中心制冷风冷液冷

2013-11-20 10:21:30

闪存

2021-03-17 08:12:03

架构Dotnet洋葱

2022-04-18 09:41:14

Go架构设计

2015-09-15 16:01:40

混合IT私有云IT架构

2023-11-14 20:51:08

点赞
收藏

51CTO技术栈公众号