【Orbit-mvi】Android MVI 框架推荐与示例,简洁优雅的实现MVI代码结构

项目介绍

示例程序

  • 预览
  • 添加依赖项到build.gradle
scss 复制代码
implementation("org.orbit-mvi:orbit-core:9.0.0")
implementation("org.orbit-mvi:orbit-viewmodel:9.0.0")

代码结构

  1. 为页面创建一个状态类XXState,包含所有状态信息,注意state中的字段是val的,不可变的,每次页面刷新都是发出一个新的state对象
kotlin 复制代码
data class MyState(
    val isLike: Boolean = false, // 是否点赞
    val likeCount: Int = 0, // 点赞数
)
  1. 为页面创建一个副作用类XXEffect,一些一次性事件,类如Toast, Loading都放在这里
kotlin 复制代码
sealed class MyEffect {
    data class Loading(val show: Boolean, val text: String? = null) : MyEffect()
    data class Toast(val text: String) : MyEffect()
}
  1. 为页面创建ViewModel, 实现ContainerHost接口
kotlin 复制代码
class MyViewModel : ViewModel(), ContainerHost<MyState, MyEffect> {
    override val container = container<MyState, MyEffect>(MyState(likeCount = 232))

    fun like() = intent {
        if (state.isLike) {
            postSideEffect(MyEffect.Toast("已点赞,不可重复点赞")) // 发送toast事件
            return@intent
        }
        postSideEffect(MyEffect.Loading(show = true, text = "请稍候...")) // 发送loading
        delay(500) // 模拟网络请求
        reduce {
            // 在此处生成新的state对象, 以便UI观察这个新state而改变
            state.copy(isLike = true, likeCount = state.likeCount + 1)
        }
        postSideEffect(MyEffect.Loading(show = false)) // 关闭loading
        postSideEffect(MyEffect.Toast("点赞成功"))
    }
}
  1. 实现页面逻辑, 此处为Activity
kotlin 复制代码
// 监听state变化和sideEffect事件
viewModel.observe(this, state = ::render, sideEffect = ::handleEffect)

// 点击事件,此处无需过度封装为一个Intent, 直接调viewmodel函数就行
binding.tvLike.setOnClickListener {
    viewModel.like()
}

// 渲染UI
fun render(state: MyState) {
    ...
    binding.textView.text = state.likeCount.toString() // 更新点赞数
}

// 处理副作用
fun handleEffect(effect: MyEffect) {
    when (effect) {
        is MyEffect.Toast -> {
            Toast.makeText(this, effect.text, Toast.LENGTH_SHORT).show()
        }
    }
}

总结

  • 可以看到, 框架已经帮我们封装好了Kotlin协程和Flow的实现,我们只需要在viewModel中使用intent{}即可, 并且侵入性较小,只需要viewModel实现一个接口就行
  • 对于副作用,例如Toast,使用postSideEffect()发出新的Effect对象
  • 对于页面刷新,例如变更点赞数,使用reduce{},将state.copy()出一个新的对象并发出
  • 本实例程序源码: Github
相关推荐
掘金-我是哪吒3 分钟前
分布式微服务系统架构第120集:专业WebSocket鉴权
分布式·websocket·微服务·云原生·架构
二J1 小时前
管理100个小程序-很难吗
android·小程序
得物技术2 小时前
得物业务参数配置中心架构综述
后端·架构
s11show_1632 小时前
hz修改后台新增keyword功能
android·java·前端
艾厶烤的鱼2 小时前
架构-软件工程
架构·软件工程
Lonwayne2 小时前
手机端本地服务与后端微服务的技术差异
微服务·智能手机·架构·程序那些事
艾厶烤的鱼3 小时前
架构-项目管理
架构
IT技术图谱3 小时前
【绝非标题党】网络监听新姿势:APT编译时注解实现高扩展框架
android·面试·架构
RichardLai883 小时前
[Flutter 基础] - Flutter基础组件 - Text
android·flutter
姜行运3 小时前
数据结构【树和二叉树】
android·数据结构·算法·c#