Android 架构之 MVI 究极体 | 状态和事件分道扬镳,粘性不再是问题

简介: Android 架构之 MVI 究极体 | 状态和事件分道扬镳,粘性不再是问题

引子


该系列基于“新闻流”进行 MVI 架构改造。在该业务场景中,界面可以发出 3 种意图,分别是1. 初始化新闻流 2.上拉加载更多新闻 3. 举报新闻。


MVI 框架中用“单向数据流”来理解界面刷新。


  • 数据流的起点是界面发出的意图(Intent),意图流入 ViewModel 持有的 Flow。


  • 数据流的终点是界面观察的状态(State),ViewModel 会提供一个“唯一数据源”供界面观察。 这样就形成如下的图景:


image.png


其中的“唯一数据源”是关键。即用一个 State 实例表达整个界面的状态。而不是像 MVVM 中用 N 个 LiveData 拼凑出完整的界面。


上图省略了 Intent 变换成 State 的中间过程。因为 Intent 只表达了意图,而意图产生的结果才唯一对应一个 State:


image.png


意图产生的结果称为 PartialChange,它是 Intent 变换为 State 的纽带。


每一个新状态的产生都基于 PartialChange 和 老状态,即(oldState: State, change: PartialChange) -> State,这称为 Reduce。


所以 MVI 中“单向数据流”的完整表述如下:


界面的意图被抽象为数据Intent,它是数据流的起点,从界面发出并流入 ViewModel 持有的 Flow。Intent 被变换成PartialChange,并借助于Reduce基于老状态生成新状态。数据流的终点是界面对 唯一 State 的观察而进行的一次渲染。


这是前三篇内容的归纳总结。若觉得云里雾里,或者对 Intent,PartialChange,Reduce,State 这些关键概念不甚理解,强烈建议从第一篇开始阅读,将有助于理解本文。


本篇将用分道扬镳的方式解决“粘性数据支持者”所带来的界面刷新问题。


粘性数据持有者之殇


在 MVVM 中,当使用 LiveData 控制 Toast 展示的时候,可能会发生 Toast 展示次数多于预期的情况。这是由于 LiveData 的粘性导致的,即“老值分发给新观察者”。关于这点的详细场景分析及解决方案可以点击LiveData 面试题库、解答、源码分析


这个问题不是 MVVM 中独有的,MVI 中通常使用stateIn()将供界面观察的流转换为StateFlow


class NewsViewModel: ViewModel() {
    val newState =
        // 意图流
        _feedsIntent 
            // 将意图流变换为 PartialChange 流
            .toPartialChangeFlow()
            // 运用 Reduce 计算出新状态
            .scan(NewsState.initial){oldState,change -> change.reduce(oldState)}
            .flowOn(Dispatchers.IO)
            // 将流转换为 StateFlow
            .stateIn(viewModelScope, SharingStarted.Eagerly, NewsState.initial)
}


StateFlow 会将流中最新的一个数据缓存起来,若有新的观察者,缓存值会分发给它。所以它的语义和 LiveData 一样,也是粘性的。


事件 & 状态


为了解决粘性数据持有者的问题,需要将界面渲染的数据来源做一个区分:


  1. 事件 Event


  1. 状态 State


被称为状态的数据,生命周期会更长一点,只要界面还在展示,该类数据就该一直存在。因为界面需要多次消费它,比如下一次界面的刷新就得基于老状态生成新状态。


而被称为事件的数据,生命周期相对短一些,界面只需要消费它们一次就完了,比如 toast。


在新闻流的业务场景中,举报新闻的结果会以 toast 的形式展现。上一篇中,将该 toast 的内容表达为唯一数据源 NewsState 的成员变量:


data class NewsState(
    val data: List<News> = emptyList(),
    val isLoading: Boolean = false,
    val isLoadingMore: Boolean = false,
    val errorMessage: String = "",
    val reportToast: String = "", // 举报结果
) {
    companion object {
        val initial = NewsState(isLoading = true)
    }
}


界面通过观察唯一数据源进行渲染:


class StateFlowActivity : AppCompatActivity() {
    private val newsViewModel by lazy {
        ViewModelProvider(
            this,
            NewsViewModelFactory(NewsRepo(this))
        )[NewsViewModel::class.java]
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(contentView)
        // 观察唯一数据源
        newsViewModel.newState
            .collectIn(this) { showNews(it) }
    }
    private fun showNews(state: NewsState) {
        state.apply {
            if (isLoading) showLoading() else dismissLoading()
            if (isLoadingMore) showLoadingMore() else dismissLoadingMore()
            // 展示举报结果
            if (reportToast.isNotEmpty()) Toast.makeText(
                this@StateFlowActivity,
                state.reportToast,
                Toast.LENGTH_SHORT
            ).show()
            if (errorMessage.isNotEmpty()) tv.text = state.errorMessage
            if (data.isNotEmpty()) newsAdapter2.dataList = state.data
        }
    }
}


举报一条新闻,然后点击 Home,再次启动 App 时,toast 会再次展示。因为 StateFlow 将缓存的最新的 State 分发给了新的观察者。


举报新闻结果是一个事件,所以得把它从状态中去掉:


data class NewsState(
    val data: List<News> = emptyList(),
    val isLoading: Boolean = false,
    val isLoadingMore: Boolean = false,
    val errorMessage: String = "",
    // val reportToast: String = "",
) {
    companion object {
        val initial = NewsState(isLoading = true)
    }
}
class StateFlowActivity : AppCompatActivity() {
    private fun showNews(state: NewsState) {
        state.apply {
            if (isLoading) showLoading() else dismissLoading()
            if (isLoadingMore) showLoadingMore() else dismissLoadingMore()
            // if (reportToast.isNotEmpty()) Toast.makeText(
            //    this@StateFlowActivity,
            //    state.reportToast,
            //    Toast.LENGTH_SHORT
            // ).show()
            if (errorMessage.isNotEmpty()) tv.text = state.errorMessage
            if (data.isNotEmpty()) newsAdapter2.dataList = state.data
        }
    }
}


把举报新闻结果定义为事件:


sealed interface FeedsEvent {
    sealed interface Report : FeedsEvent {
        data class Result(val reportToast: String) : Report
    }
}


FeedsIntent 表示新闻流中事件的超类型。目前它有一个子类 Report,表示举报新闻这个业务场景,该场景中的 Result 对应一次 toast 提示。


事件分流


原本的数据流是这样的:


image.png


现在期望实现这样的效果:


image.png


为此需要一个新的容器来承载 Event:


class NewsViewModel : ViewModel() {
    // 事件通道
    private val eventChannel = Channel<FeedsEvent>()
    // 使界面可用流的方式消费事件通道的内容
    val eventFlow = eventChannel.receiveAsFlow()
}


Channel 是一个阻塞队列,其生产者和消费者都是协程。所以生产和消费的方法都是 suspend 的,而非阻塞的。


新闻流场景中,阻塞队列的生产者即是原先的数据流,而消费者是界面。


使用响应式编程的方式,可以非常方便地进行分流:


class NewsViewModel(private val newsRepo: NewsRepo) : ViewModel() {
    private val eventChannel = Channel<FeedsEvent>()
    val eventFlow = eventChannel.receiveAsFlow()
    val newState =
        _feedsIntent
            .toPartialChangeFlow()
            .sendEvent() // 分流
            .scan(NewsState.initial) { oldState, partialChange -> partialChange.reduce(oldState) }
            .flowOn(Dispatchers.IO)
            .stateIn(viewModelScope, SharingStarted.Eagerly, NewsState.initial)
    // 对 PartialChange 流拦截并转发
    private fun Flow<FeedsPartialChange>.sendEvent(): Flow<FeedsPartialChange> =
        onEach { partialChange ->
            // 只拦截和举报有关的数据,并变换为对应Event再转发
            val event = when (partialChange) {
                is Report.Fail -> FeedsEvent.Report.Result("举报失败")
                is Report.Success -> FeedsEvent.Report.Result("举报成功")
                else -> return@onEach // 忽略和举报无关的数据
            }
            // 转发
            eventChannel.send(event)
    }
}


使用onEach()方法可以方便地获取流上的每一个数据,此时流上的 Intent 已经被变换为 PartialChange,遂对其分类讨论,其中举报对应的 PartialChange 定义如下:


sealed interface FeedsPartialChange {
    fun reduce(oldState: NewsState): NewsState
}
sealed class Report : FeedsPartialChange {
    override fun reduce(oldState: NewsState): NewsState = when (this) {
        // 举报成功时,从新闻列表中删除举报新闻
        is Success -> oldState.copy(
            data = oldState.data.filterNot { it.id == id },
        )
        // 举报失败后,保留原样
        Fail -> oldState
    }
    // 举报成功
    class Success(val id: Long) : Report()
    // 举报失败
    object Fail : Report()
}


并不是所有的 PartialChange 都对应一个事件,当前业务场景中只有一个事件,那就是举报结果的 toast 提示。所以在 onEach() 中只过滤出和举报相关的 PartialChange 并将其变换为对应的 FeedsEvent,最后将其转发到通道。


界面通过观察通道来进行 toast 的展示:


class StateFlowActivity : AppCompatActivity() {
    private val newsViewModel by lazy {
        ViewModelProvider(
            this,
            NewsViewModelFactory(NewsRepo(this))
        )[NewsViewModel::class.java]
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(contentView)
        newsViewModel.eventFlow.collectIn(this) { showEvent(it) }
    }
    private fun showEvent(event: FeedsEvent) {
        when (event) {
            is FeedsEvent.Report.Result -> Toast.makeText(
                this@StateFlowActivity,
                event.reportToast,
                Toast.LENGTH_SHORT
            ).show()
        }
    }
}


总结


将界面渲染的数据区分为状态是和事件,并以响应式编程的方式对事件类型的数据进行拦截,变换,转发以实现状态和事件的区别对待,最终解决粘性数据持有者引起的界面刷新问题。


就新闻流这个业务场景来说,其对应的 MVI 究极形态如下图所示:


image.png


举报新闻这个意图会产生两个结果,其中举报成功会同时产生一个 State 和 一个 Event,分别对应删除举报新闻,和 toast 提示。


不得不承认,该图比上一篇,又稍稍复杂了一点。


MVI 的确引入了一些新的复杂度,包括 Intent,PartialChange,Reduce,State,Event。若使用 MVVM 架构都不需要手写这些类。


就好比设计模式,通常是通过增加一层抽象来进行解耦,提供扩展性。


评判一种架构好坏的指标,是不是可以像ROI一样,看投入产出比,即新增的复杂度,是否带来了与之匹配的收益。在架构层面,收益可以有“解耦”,“增加扩展性”,“增加复用性”,“降低总体复杂度”,“增加可读性”,“增加可维护性”。


你觉得 MVI 的 ROI 是正的还是负的?热烈欢迎留言~~


目录
相关文章
|
25天前
|
安全 Android开发 iOS开发
深入探索Android与iOS的差异:从系统架构到用户体验
在当今的智能手机市场中,Android和iOS无疑是最受欢迎的两大操作系统。本文旨在探讨这两个平台之间的主要差异,包括它们的系统架构、开发环境、安全性、以及用户体验等方面。通过对比分析,我们可以更好地理解为何不同的用户群体可能会偏好其中一个平台,以及这些偏好背后的技术原因。
|
1月前
|
Android开发 Swift iOS开发
深入探索iOS与Android操作系统的架构差异及其对应用开发的影响
在当今数字化时代,移动设备已经成为我们日常生活和工作不可或缺的一部分。其中,iOS和Android作为全球最流行的两大移动操作系统,各自拥有独特的系统架构和设计理念。本文将深入探讨iOS与Android的系统架构差异,并分析这些差异如何影响应用开发者的开发策略和用户体验设计。通过对两者的比较,我们可以更好地理解它们各自的优势和局限性,从而为开发者提供有价值的见解,帮助他们在这两个平台上开发出更高效、更符合用户需求的应用。
|
18天前
|
存储 Linux API
深入探索Android系统架构:从内核到应用层的全面解析
本文旨在为读者提供一份详尽的Android系统架构分析,从底层的Linux内核到顶层的应用程序框架。我们将探讨Android系统的模块化设计、各层之间的交互机制以及它们如何共同协作以支持丰富多样的应用生态。通过本篇文章,开发者和爱好者可以更深入理解Android平台的工作原理,从而优化开发流程和提升应用性能。
|
19天前
|
安全 Android开发 iOS开发
深入探索iOS与Android系统架构差异及其对开发者的影响
本文旨在通过对比分析iOS和Android两大移动操作系统的系统架构,探讨它们在设计理念、技术实现及开发者生态方面的差异。不同于常规摘要仅概述内容要点,本摘要将简要触及核心议题,为读者提供对两大平台架构特点的宏观理解,铺垫
|
18天前
|
网络协议 Linux Android开发
深入探索Android系统架构与性能优化
本文旨在为读者提供一个全面的视角,以理解Android系统的架构及其关键组件。我们将探讨Android的发展历程、核心特性以及如何通过有效的策略来提升应用的性能和用户体验。本文不包含常规的技术细节,而是聚焦于系统架构层面的深入分析,以及针对开发者的实际优化建议。
32 1
|
22天前
|
IDE 安全 Android开发
深入探索Android与iOS操作系统的架构差异
本文旨在对比分析Android和iOS两大主流移动操作系统在架构设计上的根本差异。通过详细解读两者的系统架构、开发环境、以及安全性等方面,揭示它们各自的特点及优势,为开发者选择合适的平台提供参考。
|
1月前
|
安全 Android开发 iOS开发
深入探讨Android与iOS的系统架构差异
本文旨在通过对比分析Android和iOS两大移动操作系统的系统架构,揭示它们在设计理念、安全性、应用生态及开发环境等方面的显著差异。我们将从底层架构出发,逐步剖析至用户界面层面,为开发者和科技爱好者提供一份详尽的技术参考。
33 1
|
14天前
|
开发工具 Android开发 iOS开发
Android与iOS生态差异深度剖析:技术架构、开发体验与市场影响####
本文旨在深入探讨Android与iOS两大移动操作系统在技术架构、开发环境及市场表现上的核心差异,为开发者和技术爱好者提供全面的视角。通过对比分析,揭示两者如何塑造了当今多样化的移动应用生态,并对未来发展趋势进行了展望。 ####
|
21天前
|
安全 Linux Android开发
深入探索Android与iOS的系统架构:一场技术较量
在当今数字化时代,智能手机操作系统的选择成为了用户和开发者关注的焦点。本文将深入探讨Android与iOS两大主流操作系统的系统架构,分析它们各自的优势与局限性,并对比两者在用户体验、开发生态和安全性方面的差异。通过本文的技术剖析,读者将对这两个平台的核心技术有更深入的理解。
|
27天前
|
安全 Java Linux
深入解析Android系统架构及其对开发者的意义####
【10月更文挑战第21天】 本文旨在为读者揭开Android操作系统架构的神秘面纱,探讨其如何塑造现代移动应用开发格局。通过剖析Linux内核、硬件抽象层、运行时环境及应用程序框架等关键组件,揭示Android平台的强大功能与灵活性。文章强调了理解Android架构对于开发者优化应用性能、提升用户体验的重要性,并展望了未来技术趋势下Android的发展方向。 ####
43 0